<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>专业摄影师批量水印工具</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #2c3e50;
            color: #ecf0f1;
            line-height: 1.6;
            padding: 20px;
            min-width: 1080px;
            margin: 0 auto;
            position: relative;
            padding-bottom: 100px;
        }
        
        .main-container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: auto auto;
            gap: 25px;
            margin-bottom: 40px;
        }
        
        .row-1 {
            grid-column: 1 / 4;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 25px;
        }
        
        .row-2 {
            grid-column: 1 / 4;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 25px;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 2px solid #4a6572;
        }
        
        h1 {
            color: #ecf0f1;
            margin-bottom: 8px;
            font-size: 28px;
        }
        
        .subtitle {
            color: #bdc3c7;
            font-size: 16px;
        }
        
        .card {
            background: #4a6572;
            border-radius: 10px;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
            padding: 22px;
            border: 1px solid #5d6d7e;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .selection-card {
            background: #2F4F4F;
        }
        
        .preview-card {
            background: #483D8B;
        }
        
        h2 {
            color: #ecf0f1;
            margin-bottom: 18px;
            font-size: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #5d6d7e;
        }
        
        h2 i {
            color: #3498db;
        }
        
        .file-button-container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 15px;
            align-items: center;
            justify-content: flex-start; /* 修改为左对齐 */
        }
        
        .file-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 8px 16px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: background-color 0.3s;
            text-align: center;
            width: auto;
            flex-shrink: 0;
        }
        
        .file-button:hover {
            background-color: #2980b9;
        }
        
        .file-button.add-btn {
            background-color: #27ae60;
        }
        
        .file-button.add-btn:hover {
            background-color: #219653;
        }
        
        .file-button.remove-btn {
            background-color: #e74c3c;
        }
        
        .file-button.remove-btn:hover {
            background-color: #c0392b;
        }
        
        .file-button.clear-btn {
            background-color: #e67e22;
            margin-top: 15px;
        }
        
        .file-button.clear-btn:hover {
            background-color: #d35400;
        }
        
        .file-button.select-horizontal-btn {
            background-color: #3498db;
        }
        
        .file-button.select-horizontal-btn:hover {
            background-color: #2980b9;
        }
        
        .file-button.select-vertical-btn {
            background-color: #9b59b6;
        }
        
        .file-button.select-vertical-btn:hover {
            background-color: #8e44ad;
        }
        
        .file-input {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
            cursor: pointer;
            z-index: 2;
        }
        
        .photo-list-wrapper {
            display: flex;
            gap: 15px;
            margin-top: 15px;
            flex: 1;
            min-height: 200px;
        }
        
        /* 修改：选择照片列表框高度再高一些 */
        .photo-list-container {
            flex: 1;
            max-height: 350px; /* 从280px增加到350px */
            overflow-y: auto;
            border: 1px solid #5d6d7e;
            border-radius: 5px;
            padding: 10px;
            background-color: rgba(255, 255, 255, 0.1);
            min-height: 150px;
        }
        
        .photo-list-buttons {
            display: flex;
            flex-direction: column;
            gap: 12px; /* 增加按钮之间的间距 */
            width: 140px;
            flex-shrink: 0;
            align-items: flex-end;
        }
        
        /* 修改：清空按钮分的更开一些 */
        .photo-list-buttons .file-button.clear-btn {
            margin-top: 30px; /* 从15px增加到30px */
        }
        
        .photo-list-buttons .file-button {
            width: 100%;
            justify-content: flex-start;
            padding: 10px 12px;
        }
        
        .photo-item {
            display: flex;
            align-items: center;
            padding: 8px;
            border-bottom: 1px solid #4a6572;
            transition: background-color 0.2s;
            color: #ecf0f1;
        }
        
        .photo-item:hover {
            background-color: rgba(52, 152, 219, 0.2);
        }
        
        .photo-item:last-child {
            border-bottom: none;
        }
        
        .photo-preview {
            width: 40px;
            height: 40px;
            border-radius: 4px;
            overflow: hidden;
            margin-right: 12px;
            border: 1px solid #5d6d7e;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .photo-preview img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        
        .photo-info {
            flex: 1;
            min-width: 0;
        }
        
        .photo-name {
            font-weight: 600;
            color: #ecf0f1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 4px;
            font-size: 14px;
        }
        
        .photo-details {
            display: flex;
            gap: 12px;
            font-size: 12px;
            color: #bdc3c7;
        }
        
        .photo-details span {
            display: flex;
            align-items: center;
            gap: 3px;
        }
        
        .watermark-preview-container {
            margin-top: 15px;
            text-align: center;
            padding: 15px;
            border: 1px solid #5d6d7e;
            border-radius: 5px;
            background-color: rgba(255, 255, 255, 0.1);
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .watermark-preview {
            width: 100%;
            height: 150px;
            margin: 0 auto 15px;
            border: 1px solid #5d6d7e;
            border-radius: 4px;
            overflow: hidden;
            background: repeating-conic-gradient(rgba(52, 152, 219, 0.1) 0% 25%, rgba(44, 62, 80, 0.1) 0% 50%) 50% / 20px 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-grow: 1;
        }
        
        .watermark-preview img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        
        .watermark-info {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            gap: 15px;
            font-size: 14px;
            color: #ecf0f1;
            text-align: center;
            padding: 12px;
            background-color: rgba(52, 152, 219, 0.2);
            border-radius: 5px;
        }
        
        .watermark-info-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .watermark-info-label {
            font-size: 12px;
            color: #bdc3c7;
            margin-bottom: 4px;
        }
        
        .watermark-info-value {
            font-weight: 600;
            color: #ecf0f1;
        }
        
        .preview-container {
            display: flex;
            flex-direction: column;
            gap: 15px;
            height: 100%;
        }
        
        .preview-box {
            border: 1px solid #5d6d7e;
            border-radius: 8px;
            overflow: hidden;
            background-color: rgba(255, 255, 255, 0.1);
            position: relative;
            transform-origin: center center;
            transition: transform 0.3s ease;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .preview-header {
            background-color: rgba(52, 152, 219, 0.3);
            padding: 10px 15px;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #ecf0f1;
            flex-shrink: 0;
        }
        
        .preview-canvas-container {
            position: relative;
            width: 100%;
            flex-grow: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        
        canvas {
            max-width: 100%;
            max-height: 100%;
            display: block;
            cursor: grab;
        }
        
        canvas.dragging {
            cursor: grabbing;
        }
        
        .preview-zoom-control {
            margin-top: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .zoom-value {
            min-width: 40px;
            text-align: center;
            font-weight: 600;
            color: #ecf0f1;
        }
        
        .preview-selector-container {
            display: flex;
            gap: 10px;
            margin-top: 10px;
            align-items: center;
        }
        
        .preview-selector-label {
            font-weight: 600;
            color: #ecf0f1;
            white-space: nowrap;
        }
        
        .preview-selector {
            flex: 1;
        }
        
        .preview-selector select {
            width: 100%;
            padding: 8px;
            border: 1px solid #5d6d7e;
            border-radius: 4px;
            background-color: rgba(255, 255, 255, 0.1);
            color: #ecf0f1;
        }
        
        .preview-selector select:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .position-controls {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            flex-wrap: wrap;
            gap: 5px;
        }
        
        .position-btn {
            padding: 8px 12px;
            background-color: #34495e;
            border: 1px solid #5d6d7e;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            flex: 1;
            min-width: 60px;
            text-align: center;
            color: #ecf0f1;
        }
        
        .position-btn:hover {
            background-color: #3d566e;
        }
        
        .position-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .position-btn:disabled:hover {
            background-color: #34495e;
        }
        
        .control-group {
            margin-bottom: 15px;
        }
        
        .control-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #ecf0f1;
        }
        
        .slider-container {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-top: 5px;
        }
        
        input[type="range"] {
            flex-grow: 1;
            height: 6px;
            border-radius: 3px;
            background: #5d6d7e;
            outline: none;
            -webkit-appearance: none;
            cursor: pointer;
        }
        
        input[type="range"]:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #3498db;
            cursor: pointer;
        }
        
        input[type="range"]::-moz-range-thumb {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #3498db;
            cursor: pointer;
            border: none;
        }
        
        .slider-value {
            min-width: 40px;
            text-align: center;
            font-weight: 600;
            color: #ecf0f1;
        }
        
        .number-input {
            width: 70px;
            padding: 5px 8px;
            border: 1px solid #5d6d7e;
            border-radius: 4px;
            background-color: rgba(255, 255, 255, 0.1);
            color: #ecf0f1;
            font-size: 14px;
            text-align: center;
        }
        
        .number-input:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .control-with-input {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .control-with-input .slider-container {
            flex: 1;
        }
        
        .toggle-group {
            display: flex;
            gap: 15px;
            margin-top: 10px;
        }
        
        .toggle-btn {
            flex: 1;
            padding: 10px;
            background-color: #34495e;
            border: 2px solid #5d6d7e;
            border-radius: 6px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
            color: #ecf0f1;
        }
        
        .toggle-btn.active {
            background-color: #3498db;
            color: white;
            border-color: #2980b9;
        }
        
        .toggle-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .color-option {
            display: flex;
            gap: 15px;
            margin-top: 10px;
        }
        
        .color-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 3px solid #5d6d7e;
            cursor: pointer;
        }
        
        .color-btn.active {
            border-color: #3498db;
        }
        
        .color-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .color-btn.black {
            background-color: #000;
        }
        
        .color-btn.white {
            background-color: #fff;
            border: 3px solid #7f8c8d;
        }
        
        /* 修改：边距设置田字排列 */
        .border-controls {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-top: 15px;
        }
        
        /* 修改：边框设置组内的滑动条长度再变短一半 */
        #borderSettings .border-controls .slider-container input[type="range"] {
            max-width: 60px; /* 从120px缩短到60px */
        }
        
        /* 修改：确保边框设置组的整体布局不会乱 */
        #borderSettings .border-controls .control-group {
            margin-bottom: 10px;
        }
        
        /* 修改：确保边框设置组的宽度与照片水印单独调节一致 */
        #borderSettings {
            width: 100%;
            box-sizing: border-box;
        }
        
        .dimension-inputs {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-top: 10px;
        }
        
        .dimension-input {
            display: flex;
            flex-direction: column;
        }
        
        .dimension-input input {
            padding: 8px;
            border: 1px solid #5d6d7e;
            border-radius: 4px;
            margin-top: 5px;
            background-color: rgba(255, 255, 255, 0.1);
            color: #ecf0f1;
        }
        
        .watermark-size-info {
            background-color: #34495e;
            padding: 10px;
            border-radius: 5px;
            margin-top: 15px;
            font-size: 14px;
            color: #bdc3c7;
        }
        
        .no-photos-message {
            text-align: center;
            padding: 30px;
            color: #bdc3c7;
            font-style: italic;
        }
        
        .no-watermark-message {
            text-align: center;
            padding: 20px;
            color: #bdc3c7;
            font-style: italic;
        }
        
        .photo-count {
            font-size: 14px;
            color: #3498db;
            font-weight: 600;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .single-photo-selector {
            max-height: 250px;
            overflow-y: auto;
            border: 1px solid #5d6d7e;
            border-radius: 5px;
            padding: 10px;
            background-color: rgba(255, 255, 255, 0.1);
            margin-top: 10px;
        }
        
        .single-photo-item {
            display: flex;
            align-items: center;
            padding: 8px;
            border-bottom: 1px solid #4a6572;
            transition: background-color 0.2s;
            color: #ecf0f1;
            cursor: pointer;
        }
        
        .single-photo-item:hover {
            background-color: rgba(52, 152, 219, 0.2);
        }
        
        .single-photo-item.selected {
            background-color: #3498db;
        }
        
        .single-photo-item:last-child {
            border-bottom: none;
        }
        
        .single-photo-preview {
            width: 40px;
            height: 40px;
            border-radius: 4px;
            overflow: hidden;
            margin-right: 12px;
            border: 1px solid #5d6d7e;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .single-photo-preview img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        
        .single-photo-info {
            flex: 1;
            min-width: 0;
        }
        
        .single-photo-name {
            font-weight: 600;
            color: #ecf0f1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 4px;
            font-size: 14px;
        }
        
        .single-photo-details {
            display: flex;
            gap: 12px;
            font-size: 12px;
            color: #bdc3c7;
        }
        
        .single-preview-container {
            border: 1px solid #5d6d7e;
            border-radius: 8px;
            overflow: hidden;
            background-color: rgba(255, 255, 255, 0.1);
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            margin-top: 10px;
        }
        
        .single-preview-canvas-container {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        
        .input-hint {
            font-size: 12px;
            color: #bdc3c7;
            margin-top: 5px;
            font-style: italic;
        }
        
        .single-photo-count {
            font-size: 14px;
            color: #27ae60;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .selection-buttons {
            display: flex;
            gap: 10px;
            margin-top: 10px;
            margin-bottom: 15px;
            align-items: center;
        }
        
        .selection-btn {
            flex: 1;
            padding: 8px;
            background-color: #34495e;
            border: 1px solid #5d6d7e;
            border-radius: 4px;
            color: #ecf0f1;
            cursor: pointer;
            text-align: center;
            font-size: 12px;
            transition: background-color 0.2s;
        }
        
        .selection-btn:hover {
            background-color: #3d566e;
        }
        
        .selection-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .selection-btn:disabled:hover {
            background-color: #34495e;
        }
        
        .selection-btn#selectAllHorizontalSingle {
            background-color: #3498db;
        }
        
        .selection-btn#selectAllHorizontalSingle:hover {
            background-color: #2980b9;
        }
        
        .selection-btn#selectAllVerticalSingle {
            background-color: #9b59b6;
        }
        
        .selection-btn#selectAllVerticalSingle:hover {
            background-color: #8e44ad;
        }
        
        .drag-hint {
            position: absolute;
            bottom: 10px;
            right: 10px;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 12px;
            z-index: 10;
            display: none;
        }
        
        .drag-hint.show {
            display: block;
        }
        
        .photo-checkbox {
            margin-right: 12px;
            width: 18px;
            height: 18px;
            cursor: pointer;
        }
        
        #borderSettings {
            background-color: #555555;
            padding: 20px;
            border-radius: 8px;
            margin-top: 15px;
        }
        
        #borderSettings .control-group {
            margin-bottom: 15px;
        }
        
        #borderSettings .control-label {
            color: #ecf0f1;
        }
        
        .preview-transform-container {
            position: relative;
            width: 100%;
            height: 100%;
            transform-origin: center center;
            transition: transform 0.3s ease;
        }
        
        .zoom-hint {
            position: absolute;
            bottom: 10px;
            left: 10px;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 12px;
            z-index: 10;
            display: none;
        }
        
        .zoom-hint.show {
            display: block;
        }
        
        .single-settings-card .adjustment-controls {
            flex-grow: 1;
            overflow-y: auto;
        }
        
        .compact-file-selection {
            display: flex;
            flex-direction: column;
            gap: 15px;
            max-height: 280px;
            overflow-y: auto;
            border: 1px solid #5d6d7e;
            border-radius: 5px;
            padding: 10px;
            background-color: rgba(255, 255, 255, 0.1);
        }
        
        .side-by-side-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-top: 15px;
        }
        
        .compact-photo-list {
            max-height: 250px;
            overflow-y: auto;
        }
        
        .process-btn-container {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 100;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            width: 100%;
            pointer-events: none;
        }
        
        .btn.process-btn {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            padding: 12px 24px;
            background-color: #27ae60;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            transition: background-color 0.3s;
            width: auto;
            min-width: 150px;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
            line-height: 1.2;
            text-align: center;
            gap: 10px;
            pointer-events: auto;
        }
        
        .btn.process-btn i {
            font-size: 18px;
        }
        
        .btn.process-btn:hover {
            background-color: #219653;
        }
        
        .btn.process-btn:disabled {
            background-color: #5d6d7e;
            cursor: not-allowed;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
        }
        
        .btn.process-btn:disabled:hover {
            background-color: #5d6d7e;
        }
        
        .progress-container {
            margin-top: 0;
            display: none;
            width: 300px;
            pointer-events: auto;
        }
        
        .progress-bar {
            width: 100%;
            height: 20px;
            background-color: #34495e;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 10px;
        }
        
        .progress-fill {
            height: 100%;
            background-color: #27ae60;
            width: 0%;
            transition: width 0.3s;
        }
        
        .progress-text {
            text-align: center;
            font-weight: 600;
            color: #ecf0f1;
        }
        
        .footer-note {
            text-align: center;
            margin-top: 25px;
            padding-top: 15px;
            border-top: 2px solid #4a6572;
            color: #bdc3c7;
            font-size: 14px;
        }
        
        ::-webkit-scrollbar {
            width: 10px;
        }
        
        ::-webkit-scrollbar-track {
            background: #34495e;
            border-radius: 5px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #5d6d7e;
            border-radius: 5px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #7f8c8d;
        }
        
        select option {
            background-color: #2c3e50;
            color: #ecf0f1;
        }
        
        @media (max-width: 1200px) {
            .main-container {
                grid-template-columns: 1fr;
                grid-template-rows: auto auto auto auto auto auto;
            }
            
            .row-1, .row-2 {
                grid-column: 1;
                grid-template-columns: 1fr;
            }
            
            .process-btn-container {
                position: static;
                transform: none;
                margin-top: 30px;
                text-align: center;
                pointer-events: auto;
            }
            
            .btn.process-btn {
                width: 100%;
                max-width: 200px;
                flex-direction: row;
                padding: 12px 20px;
                min-width: auto;
                max-width: none;
            }
            
            .btn.process-btn i {
                margin-bottom: 0;
                margin-right: 10px;
            }
        }
        
        .reset-single-container {
            margin-top: 15px;
        }
        
        .reset-single-btn {
            padding: 10px;
            background-color: #34495e;
            border: 1px solid #5d6d7e;
            border-radius: 4px;
            color: #ecf0f1;
            cursor: pointer;
            text-align: center;
            transition: background-color 0.2s;
            width: 100%;
        }
        
        .reset-single-btn:hover {
            background-color: #3d566e;
        }
        
        .reset-single-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .reset-single-btn:disabled:hover {
            background-color: #34495e;
        }
        
        .adjustment-controls {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #5d6d7e;
        }
        
        .adjustment-title {
            font-size: 16px;
            font-weight: 600;
            color: #ecf0f1;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .adjustment-title i {
            color: #3498db;
        }
        
        .photo-list-actions {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }
        
        .photo-checkbox-container {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 10px;
            margin-bottom: 10px;
            justify-content: flex-end;
        }
        
        .selection-card-content {
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        
        .photo-selection-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        
        .photo-selection-header-text {
            display: flex;
            align-items: center;
            gap: 5px;
            font-weight: 600;
            color: #ecf0f1;
        }
        
        .photo-selection-header-hint {
            font-size: 14px;
            color: #bdc3c7;
        }
        
        .selection-header-compact {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 15px;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        
        .selection-header-compact span {
            font-weight: 600;
            color: #ecf0f1;
            white-space: nowrap;
        }
        
        .selection-header-compact .hint-text {
            font-size: 14px;
            color: #bdc3c7;
        }
        
        .selection-header-with-count {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
            flex-wrap: wrap;
            width: 100%;
        }
        
        .selection-header-left {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        
        .selection-header-left span {
            font-weight: 600;
            color: #ecf0f1;
            white-space: nowrap;
        }
        
        .selection-header-left .hint-text {
            font-size: 14px;
            color: #bdc3c7;
        }
        
        .selection-header-right {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 14px;
            color: #3498db;
            font-weight: 600;
        }
        
        .border-color-radius-container {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-top: 10px;
        }
        
        .border-color-container {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .border-radius-short-container {
            display: flex;
            flex-direction: column;
            flex: 1;
        }
        
        .border-radius-short-slider {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .border-radius-short-slider input[type="range"] {
            flex: 1;
            min-width: 0;
            max-width: 150px;
        }
        
        .adjustment-controls.disabled {
            opacity: 0.5;
            pointer-events: none;
            cursor: not-allowed;
        }
        
        .adjustment-controls.disabled .control-with-input input,
        .adjustment-controls.disabled .control-with-input .slider-container,
        .adjustment-controls.disabled .control-with-input .number-input {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .single-adjust-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }
        
        .single-adjust-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 20px;
            color: #ecf0f1;
        }
        
        .single-adjust-title i {
            color: #3498db;
        }
        
        .single-adjust-checkbox-container {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .disabled-controls {
            opacity: 0.5;
            pointer-events: none;
        }
        
        .disabled-controls input,
        .disabled-controls select,
        .disabled-controls button {
            cursor: not-allowed;
        }
        
        .selection-buttons-with-checkbox {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 10px;
            margin-bottom: 15px;
        }
        
        .selection-buttons-with-checkbox .checkbox-container {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-right: 10px;
        }
        
        .selection-buttons-with-checkbox .selection-btn {
            flex: 1;
        }
    </style>
</head>
<body>
    <header>
        <h1><i class="fas fa-camera"></i> 专业摄影师批量水印工具</h1>
        <p class="subtitle">批量添加水印 | 位置可调 | 横竖图独立设置 | 保留原始画质</p>
    </header>
    
    <div class="main-container">
        <!-- 第一行：选择照片、选择水印、边框设置 -->
        <div class="row-1">
            <!-- 选择照片 -->
            <div class="card selection-card">
                <h2><i class="fas fa-images"></i> 选择照片</h2>
                <div class="selection-card-content">
                    <div class="selection-header-with-count">
                        <div class="selection-header-left">
                            <span class="hint-text">支持 JPG、PNG 格式，可多选</span>
                        </div>
                        <div class="selection-header-right">
                            <i class="fas fa-layer-group"></i> 已选择 <span id="photoCount">0</span> 张照片
                        </div>
                    </div>
                    
                    <div class="photo-checkbox-container">
                        <input type="checkbox" id="selectAllCheckbox">
                        <label for="selectAllCheckbox">全选/取消全选</label>
                    </div>
                    
                    <div class="photo-list-wrapper">
                        <div class="photo-list-container" id="photoListContainer">
                            <div class="no-photos-message">尚未选择任何照片</div>
                        </div>
                        
                        <div class="photo-list-buttons">
                            <button class="file-button add-btn" id="addMorePhotoButton">
                                <i class="fas fa-plus"></i> 增加照片
                            </button>
                            <input type="file" class="file-input" id="addMorePhotoInput" accept="image/jpeg,image/png" multiple>
                            <button class="file-button remove-btn" id="removeSelectedButton">
                                <i class="fas fa-minus"></i> 减去选中
                            </button>
                            <button class="file-button select-horizontal-btn" id="selectAllHorizontalList">
                                <i class="fas fa-arrows-alt-h"></i> 选择所有横图
                            </button>
                            <button class="file-button select-vertical-btn" id="selectAllVerticalList">
                                <i class="fas fa-arrows-alt-v"></i> 选择所有竖图
                            </button>
                            <button class="file-button clear-btn" id="clearAllButton">
                                <i class="fas fa-trash-alt"></i> 清空
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 选择水印 -->
            <div class="card selection-card">
                <h2><i class="fas fa-water"></i> 选择水印图片</h2>
                <!-- 修改：选择水印部分布局调整为左对齐，文字和按钮在一行 -->
                <div class="file-button-container">
                    <span style="font-weight: 600; color: #ecf0f1; margin-right: 10px;">选择水印:</span>
                    <button class="file-button" id="watermarkButton">
                        <i class="fas fa-file-image"></i> 选择水印图片
                    </button>
                    <input type="file" class="file-input" id="watermarkInput" accept="image/png">
                    <span style="font-size: 14px; color: #bdc3c7; margin-left: 10px;">
                        仅支持PNG格式（建议使用透明背景）
                    </span>
                </div>
                
                <div class="watermark-preview-container" id="watermarkPreviewContainer">
                    <div class="watermark-preview" id="watermarkPreview">
                        <div class="no-watermark-message">水印预览将在此显示</div>
                    </div>
                    <div class="watermark-info" id="watermarkInfo">
                    </div>
                </div>
            </div>
            
            <!-- 边框设置 -->
            <div class="card">
                <h2><i class="fas fa-square"></i> 边框设置</h2>
                
                <div class="control-group">
                    <label class="control-label">边框样式</label>
                    <div class="toggle-group">
                        <div class="toggle-btn active" id="borderOff">无边框</div>
                        <div class="toggle-btn" id="borderOn">有边框</div>
                    </div>
                </div>
                
                <div id="borderSettings" style="display: none;">
                    <div class="control-group">
                        <label class="control-label">边框颜色</label>
                        <div class="border-color-radius-container">
                            <div class="border-color-container">
                                <div class="color-option">
                                    <div class="color-btn black active" id="colorBlack"></div>
                                    <div class="color-btn white" id="colorWhite"></div>
                                </div>
                            </div>
                            <div class="border-radius-short-container">
                                <div class="border-radius-short-slider">
                                    <label class="control-label">照片圆角</label>
                                    <input type="range" id="borderRadius" min="0" max="500" value="50" step="1">
                                    <span class="slider-value" id="radiusValue">50</span>
                                    <input type="number" class="number-input" id="borderRadiusInput" min="0" max="500" value="50" step="1" style="width: 60px;">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 修改：边距设置改为田字排列，文字改为上宽、下宽、左宽、右宽 -->
                    <div class="border-controls">
                        <!-- 第一行：上宽和下宽 -->
                        <div class="control-group">
                            <div class="control-with-input">
                                <div class="slider-container">
                                    <label class="control-label">上宽</label>
                                    <input type="range" id="borderTop" min="0" max="1000" value="100" step="1">
                                    <span class="slider-value" id="borderTopValue">100</span>
                                </div>
                                <input type="number" class="number-input" id="borderTopInput" min="0" max="1000" value="100" step="1">
                            </div>
                        </div>
                        
                        <div class="control-group">
                            <div class="control-with-input">
                                <div class="slider-container">
                                    <label class="control-label">下宽</label>
                                    <input type="range" id="borderBottom" min="0" max="1000" value="100" step="1">
                                    <span class="slider-value" id="borderBottomValue">100</span>
                                </div>
                                <input type="number" class="number-input" id="borderBottomInput" min="0" max="1000" value="100" step="1">
                            </div>
                        </div>
                        
                        <!-- 第二行：左宽和右宽 -->
                        <div class="control-group">
                            <div class="control-with-input">
                                <div class="slider-container">
                                    <label class="control-label">左宽</label>
                                    <input type="range" id="borderLeft" min="0" max="1000" value="100" step="1">
                                    <span class="slider-value" id="borderLeftValue">100</span>
                                </div>
                                <input type="number" class="number-input" id="borderLeftInput" min="0" max="1000" value="100" step="1">
                            </div>
                        </div>
                        
                        <div class="control-group">
                            <div class="control-with-input">
                                <div class="slider-container">
                                    <label class="control-label">右宽</label>
                                    <input type="range" id="borderRight" min="0" max="1000" value="100" step="1">
                                    <span class="slider-value" id="borderRightValue">100</span>
                                </div>
                                <input type="number" class="number-input" id="borderRightInput" min="0" max="1000" value="100" step="1">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 第二行：横图预览、竖图预览、照片水印单独调节 -->
        <div class="row-2">
            <!-- 横图预览 -->
            <div class="card preview-card preview-container" id="horizontalPreviewCard">
                <div class="preview-box" id="horizontalPreviewBox">
                    <div class="preview-header">
                        <span>横图预览</span>
                        <span id="horizontalSize">未选择</span>
                    </div>
                    <div class="preview-canvas-container">
                        <div class="preview-transform-container" id="horizontalTransformContainer">
                            <canvas id="horizontalCanvas"></canvas>
                        </div>
                        <div class="drag-hint" id="horizontalDragHint">按住并拖动可平移预览</div>
                        <div class="zoom-hint" id="horizontalZoomHint">缩放: 100%</div>
                    </div>
                </div>
                
                <div class="preview-zoom-control">
                    <span>预览缩放:</span>
                    <input type="range" id="horizontalZoom" min="50" max="300" value="100" step="5" disabled>
                    <span class="zoom-value" id="horizontalZoomValue">100%</span>
                </div>
                
                <div class="preview-selector-container">
                    <span class="preview-selector-label">选择横图预览:</span>
                    <div class="preview-selector">
                        <select id="horizontalPreviewSelect">
                        </select>
                    </div>
                </div>
                
                <!-- 修改：横图水印透明度位置向下移动，移到水平位置调节上面 -->
                <div class="position-controls">
                    <button class="position-btn" id="hTopLeft" disabled>左上</button>
                    <button class="position-btn" id="hTopCenter" disabled>中上</button>
                    <button class="position-btn" id="hTopRight" disabled>右上</button>
                    <button class="position-btn" id="hMiddleLeft" disabled>左中</button>
                    <button class="position-btn" id="hCenter" disabled>居中</button>
                    <button class="position-btn" id="hMiddleRight" disabled>右中</button>
                    <button class="position-btn" id="hBottomLeft" disabled>左下</button>
                    <button class="position-btn" id="hBottomCenter" disabled>中下</button>
                    <button class="position-btn" id="hBottomRight" disabled>右下</button>
                </div>
                
                <div class="control-group">
                    <div class="control-with-input">
                        <div class="slider-container">
                            <label class="control-label">横图水印透明度</label>
                            <input type="range" id="horizontalWatermarkOpacity" min="0" max="100" value="100" step="1" disabled>
                            <span class="slider-value" id="horizontalOpacityValue">100%</span>
                        </div>
                        <input type="number" class="number-input" id="horizontalWatermarkOpacityInput" min="0" max="100" value="100" step="1" disabled>
                    </div>
                </div>
                
                <div class="control-group">
                    <div class="control-with-input">
                        <div class="slider-container">
                            <label class="control-label">水平位置</label>
                            <input type="range" id="hPositionX" min="0" max="100" value="50" step="0.5" disabled>
                            <span class="slider-value"><span id="hXValue">50%</span></span>
                        </div>
                        <input type="number" class="number-input" id="hPositionXInput" min="0" max="100" value="50" step="0.5" disabled>
                    </div>
                </div>
                
                <div class="control-group">
                    <div class="control-with-input">
                        <div class="slider-container">
                            <label class="control-label">垂直位置</label>
                            <input type="range" id="hPositionY" min="0" max="100" value="94" step="0.5" disabled>
                            <span class="slider-value"><span id="hYValue">94%</span></span>
                        </div>
                        <input type="number" class="number-input" id="hPositionYInput" min="0" max="100" value="94" step="0.5" disabled>
                    </div>
                </div>
                
                <div class="control-group">
                    <div class="control-with-input">
                        <div class="slider-container">
                            <label class="control-label">横图水印大小</label>
                            <input type="range" id="horizontalWatermarkSize" min="1" max="100" value="22" step="0.5" disabled>
                            <span class="slider-value" id="horizontalSizeValue">22%</span>
                        </div>
                        <input type="number" class="number-input" id="horizontalWatermarkSizeInput" min="1" max="100" value="22" step="0.5" disabled>
                    </div>
                </div>
            </div>
            
            <!-- 竖图预览 -->
            <div class="card preview-card preview-container" id="verticalPreviewCard">
                <div class="preview-box" id="verticalPreviewBox">
                    <div class="preview-header">
                        <span>竖图预览</span>
                        <span id="verticalSize">未选择</span>
                    </div>
                    <div class="preview-canvas-container">
                        <div class="preview-transform-container" id="verticalTransformContainer">
                            <canvas id="verticalCanvas"></canvas>
                        </div>
                        <div class="drag-hint" id="verticalDragHint">按住并拖动可平移预览</div>
                        <div class="zoom-hint" id="verticalZoomHint">缩放: 100%</div>
                    </div>
                </div>
                
                <div class="preview-zoom-control">
                    <span>预览缩放:</span>
                    <input type="range" id="verticalZoom" min="50" max="300" value="100" step="5" disabled>
                    <span class="zoom-value" id="verticalZoomValue">100%</span>
                </div>
                
                <div class="preview-selector-container">
                    <span class="preview-selector-label">选择竖图预览:</span>
                    <div class="preview-selector">
                        <select id="verticalPreviewSelect">
                        </select>
                    </div>
                </div>
                
                <!-- 修改：竖图水印透明度位置向下移动，移到水平位置调节上面 -->
                <div class="position-controls">
                    <button class="position-btn" id="vTopLeft" disabled>左上</button>
                    <button class="position-btn" id="vTopCenter" disabled>中上</button>
                    <button class="position-btn" id="vTopRight" disabled>右上</button>
                    <button class="position-btn" id="vMiddleLeft" disabled>左中</button>
                    <button class="position-btn" id="vCenter" disabled>居中</button>
                    <button class="position-btn" id="vMiddleRight" disabled>右中</button>
                    <button class="position-btn" id="vBottomLeft" disabled>左下</button>
                    <button class="position-btn" id="vBottomCenter" disabled>中下</button>
                    <button class="position-btn" id="vBottomRight" disabled>右下</button>
                </div>
                
                <div class="control-group">
                    <div class="control-with-input">
                        <div class="slider-container">
                            <label class="control-label">竖图水印透明度</label>
                            <input type="range" id="verticalWatermarkOpacity" min="0" max="100" value="100" step="1" disabled>
                            <span class="slider-value" id="verticalOpacityValue">100%</span>
                        </div>
                        <input type="number" class="number-input" id="verticalWatermarkOpacityInput" min="0" max="100" value="100" step="1" disabled>
                    </div>
                </div>
                
                <div class="control-group">
                    <div class="control-with-input">
                        <div class="slider-container">
                            <label class="control-label">水平位置</label>
                            <input type="range" id="vPositionX" min="0" max="100" value="50" step="0.5" disabled>
                            <span class="slider-value"><span id="vXValue">50%</span></span>
                        </div>
                        <input type="number" class="number-input" id="vPositionXInput" min="0" max="100" value="50" step="0.5" disabled>
                    </div>
                </div>
                
                <div class="control-group">
                    <div class="control-with-input">
                        <div class="slider-container">
                            <label class="control-label">垂直位置</label>
                            <input type="range" id="vPositionY" min="0" max="100" value="94" step="0.5" disabled>
                            <span class="slider-value"><span id="vYValue">94%</span></span>
                        </div>
                        <input type="number" class="number-input" id="vPositionYInput" min="0" max="100" value="94" step="0.5" disabled>
                    </div>
                </div>
                
                <div class="control-group">
                    <div class="control-with-input">
                        <div class="slider-container">
                            <label class="control-label">竖图水印大小</label>
                            <input type="range" id="verticalWatermarkSize" min="1" max="100" value="45" step="0.5" disabled>
                            <span class="slider-value" id="verticalSizeValue">45%</span>
                        </div>
                        <input type="number" class="number-input" id="verticalWatermarkSizeInput" min="1" max="100" value="45" step="0.5" disabled>
                    </div>
                </div>
            </div>
            
            <!-- 照片水印单独调节 -->
            <div class="card" id="singleAdjustCard">
                <div class="single-adjust-header">
                    <div class="single-adjust-title">
                        <i class="fas fa-brush"></i> 照片水印单独调节
                    </div>
                    <div class="single-photo-count">
                        <i class="fas fa-check-circle"></i> 当前选择: <span id="singleSelectedCount">0</span> 张
                    </div>
                </div>
                
                <!-- 修改：将全选复选框和选择按钮放在同一行 -->
                <div class="selection-buttons-with-checkbox">
                    <div class="checkbox-container">
                        <input type="checkbox" id="selectAllSinglePhotos" disabled>
                        <label for="selectAllSinglePhotos">全选/取消</label>
                    </div>
                    <button class="selection-btn" id="selectAllHorizontalSingle" disabled>
                        <i class="fas fa-arrows-alt-h"></i> 选择所有横图
                    </button>
                    <button class="selection-btn" id="selectAllVerticalSingle" disabled>
                        <i class="fas fa-arrows-alt-v"></i> 选择所有竖图
                    </button>
                </div>
                
                <div class="side-by-side-container">
                    <div>
                        <label class="control-label">选择照片进行单独调节</label>
                        <div class="compact-file-selection" id="singlePhotoSelector">
                            <div class="no-photos-message">请先选择照片</div>
                        </div>
                    </div>
                    
                    <div>
                        <label class="control-label">单独水印调节预览</label>
                        <div class="single-preview-container">
                            <div class="single-preview-canvas-container">
                                <canvas id="singlePreviewCanvas"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="reset-single-container">
                    <button class="reset-single-btn" id="resetSingleSettings" disabled>重置选中照片设置</button>
                </div>
                
                <div class="adjustment-controls" id="adjustmentControls">
                    <div class="adjustment-title">
                        <i class="fas fa-sliders-h"></i> 单独水印调节设置
                    </div>
                    
                    <div class="control-group">
                        <div class="control-with-input">
                            <div class="slider-container">
                                <label class="control-label">不透明度</label>
                                <input type="range" id="singleWatermarkOpacity" min="0" max="100" value="100" step="1" disabled>
                                <span class="slider-value" id="singleOpacityValue">100%</span>
                            </div>
                            <input type="number" class="number-input" id="singleWatermarkOpacityInput" min="0" max="100" value="100" step="1" disabled>
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <div class="control-with-input">
                            <div class="slider-container">
                                <label class="control-label">亮度</label>
                                <input type="range" id="singleWatermarkBrightness" min="0" max="200" value="100" step="1" disabled>
                                <span class="slider-value" id="singleBrightnessValue">100%</span>
                            </div>
                            <input type="number" class="number-input" id="singleWatermarkBrightnessInput" min="0" max="200" value="100" step="1" disabled>
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <div class="control-with-input">
                            <div class="slider-container">
                                <label class="control-label">曝光度</label>
                                <input type="range" id="singleWatermarkExposure" min="0" max="200" value="100" step="1" disabled>
                                <span class="slider-value" id="singleExposureValue">100%</span>
                            </div>
                            <input type="number" class="number-input" id="singleWatermarkExposureInput" min="0" max="200" value="100" step="1" disabled>
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <div class="control-with-input">
                            <div class="slider-container">
                                <label class="control-label">对比度</label>
                                <input type="range" id="singleWatermarkContrast" min="0" max="200" value="100" step="1" disabled>
                                <span class="slider-value" id="singleContrastValue">100%</span>
                            </div>
                            <input type="number" class="number-input" id="singleWatermarkContrastInput" min="0" max="200" value="100" step="1" disabled>
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <div class="control-with-input">
                            <div class="slider-container">
                                <label class="control-label">饱和度</label>
                                <input type="range" id="singleWatermarkSaturation" min="0" max="200" value="100" step="1" disabled>
                                <span class="slider-value" id="singleSaturationValue">100%</span>
                            </div>
                            <input type="number" class="number-input" id="singleWatermarkSaturationInput" min="0" max="200" value="100" step="1" disabled>
                        </div>
                    </div>
                    
                    <div class="input-hint">
                        <i class="fas fa-info-circle"></i> 提示：调节效果会实时预览并自动应用到选中的照片，双击任意滑块可以将其重置为默认值（100%）
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="process-btn-container">
        <button class="btn process-btn" id="processBtn" disabled>
            <i class="fas fa-cogs"></i> 处理
        </button>
        
        <div class="progress-container" id="progressContainer">
            <div class="progress-bar">
                <div class="progress-fill" id="progressFill"></div>
            </div>
            <div class="progress-text" id="progressText">准备中...</div>
        </div>
    </div>
    
    <div class="footer-note">
        <p><i class="fas fa-info-circle"></i> 提示：所有处理均在浏览器本地完成，您的照片不会上传到任何服务器。处理完成后将下载ZIP文件，包含所有带水印的照片，原始照片不会被修改。</p>
        <p>支持 Windows、Mac 和 Android 设备 | 使用 HTML5 Canvas 技术</p>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    
    <script>
        // 全局变量
        let photos = [];
        let watermarkImage = null;
        let watermarkOriginalFile = null;
        let folderName = "加水印";
        
        let horizontalPosition = { x: 50, y: 94 };
        let verticalPosition = { x: 50, y: 94 };
        
        let horizontalZoom = 100;
        let verticalZoom = 100;
        let horizontalTransform = { x: 0, y: 0, scale: 1 };
        let verticalTransform = { x: 0, y: 0, scale: 1 };
        
        let currentHorizontalImage = null;
        let currentVerticalImage = null;
        
        let selectedPhotos = new Set();
        
        let isDraggingHorizontal = false;
        let isDraggingVertical = false;
        let dragStart = { x: 0, y: 0 };
        
        let photoCheckboxes = new Set();
        let photoInputCleared = false;
        
        // 水印设置
        let settings = {
            horizontalWatermarkSize: 22,
            horizontalWatermarkOpacity: 1.0,
            horizontalWatermarkBrightness: 100,
            horizontalWatermarkContrast: 100,
            horizontalWatermarkSaturation: 100,
            horizontalWatermarkExposure: 100,
            
            verticalWatermarkSize: 45,
            verticalWatermarkOpacity: 1.0,
            verticalWatermarkBrightness: 100,
            verticalWatermarkContrast: 100,
            verticalWatermarkSaturation: 100,
            verticalWatermarkExposure: 100,
            
            singleWatermarkOpacity: 1.0,
            singleWatermarkBrightness: 100,
            singleWatermarkContrast: 100,
            singleWatermarkSaturation: 100,
            singleWatermarkExposure: 100,
            
            border: {
                enabled: false,
                color: 'black',
                borderRadius: 50,
                top: 100,
                bottom: 100,
                left: 100,
                right: 100
            }
        };
        
        // 初始化事件监听器
        document.addEventListener('DOMContentLoaded', function() {
            initEventListeners();
            updateSingleAdjustmentControlsState();
            updateWatermarkControlsState();
            updateOrientationButtonsState(); // 初始更新方向按钮状态
        });
        
        // 初始化所有事件监听器
        function initEventListeners() {
            // 文件按钮点击事件
            document.getElementById('addMorePhotoButton').addEventListener('click', function() {
                if (photoInputCleared) {
                    document.getElementById('addMorePhotoInput').value = '';
                    photoInputCleared = false;
                }
                document.getElementById('addMorePhotoInput').click();
            });
            
            document.getElementById('removeSelectedButton').addEventListener('click', removeSelectedPhotos);
            document.getElementById('clearAllButton').addEventListener('click', clearAllPhotos);
            document.getElementById('selectAllHorizontalList').addEventListener('click', function() {
                selectAllPhotosByOrientationInList('horizontal');
            });
            document.getElementById('selectAllVerticalList').addEventListener('click', function() {
                selectAllPhotosByOrientationInList('vertical');
            });
            document.getElementById('watermarkButton').addEventListener('click', function() {
                document.getElementById('watermarkInput').click();
            });
            
            // 文件输入事件
            document.getElementById('addMorePhotoInput').addEventListener('change', handlePhotoAdd);
            document.getElementById('watermarkInput').addEventListener('change', handleWatermarkSelect);
            
            // 全选/取消全选复选框（选择照片功能区）
            document.getElementById('selectAllCheckbox').addEventListener('change', function() {
                const isChecked = this.checked;
                const checkboxes = document.querySelectorAll('.photo-item-checkbox');
                checkboxes.forEach(checkbox => {
                    checkbox.checked = isChecked;
                    const index = parseInt(checkbox.getAttribute('data-index'));
                    if (isChecked) {
                        photoCheckboxes.add(index);
                    } else {
                        photoCheckboxes.delete(index);
                    }
                });
            });
            
            // 全选/取消全选复选框（单独调节功能区） - 修复：添加了applySingleSettingsAutomatically调用
            document.getElementById('selectAllSinglePhotos').addEventListener('change', function() {
                const isChecked = this.checked;
                
                if (photos.length === 0) {
                    this.checked = false;
                    return;
                }
                
                if (isChecked) {
                    // 选择所有照片
                    selectedPhotos.clear();
                    photos.forEach((photo, index) => {
                        selectedPhotos.add(index);
                        // 修复：应用当前单独水印调节设置到所有照片
                        photo.watermarkOpacity = settings.singleWatermarkOpacity;
                        photo.watermarkBrightness = settings.singleWatermarkBrightness;
                        photo.watermarkContrast = settings.singleWatermarkContrast;
                        photo.watermarkSaturation = settings.singleWatermarkSaturation;
                        photo.watermarkExposure = settings.singleWatermarkExposure;
                    });
                } else {
                    // 取消选择所有照片
                    selectedPhotos.clear();
                    // 取消选择时重置所有照片的设置
                    photos.forEach(photo => {
                        photo.watermarkOpacity = 1.0;
                        photo.watermarkBrightness = 100;
                        photo.watermarkContrast = 100;
                        photo.watermarkSaturation = 100;
                        photo.watermarkExposure = 100;
                    });
                }
                
                updateSinglePhotoSelector();
                updateSingleAdjustmentControlsState();
                updateSingleWatermarkPreview();
                updatePreviews();
            });
            
            // 单独调节功能区选择所有横图按钮
            document.getElementById('selectAllHorizontalSingle').addEventListener('click', function() {
                selectAllPhotosByOrientation('horizontal');
            });
            
            // 单独调节功能区选择所有竖图按钮
            document.getElementById('selectAllVerticalSingle').addEventListener('click', function() {
                selectAllPhotosByOrientation('vertical');
            });
            
            // 横图缩放控制
            const horizontalZoomSlider = document.getElementById('horizontalZoom');
            const horizontalZoomValue = document.getElementById('horizontalZoomValue');
            
            horizontalZoomSlider.addEventListener('input', function() {
                horizontalZoom = parseInt(this.value);
                horizontalZoomValue.textContent = this.value + '%';
                horizontalTransform.scale = horizontalZoom / 100;
                applyPreviewTransform('horizontal');
                document.getElementById('horizontalZoomHint').textContent = `缩放: ${horizontalZoom}%`;
                document.getElementById('horizontalZoomHint').classList.add('show');
                setTimeout(() => {
                    document.getElementById('horizontalZoomHint').classList.remove('show');
                }, 2000);
                updatePreviews();
            });
            
            horizontalZoomSlider.addEventListener('dblclick', function() {
                horizontalZoom = 100;
                horizontalZoomSlider.value = 100;
                horizontalZoomValue.textContent = '100%';
                horizontalTransform = { x: 0, y: 0, scale: 1 };
                applyPreviewTransform('horizontal');
                updatePreviews();
            });
            
            // 竖图缩放控制
            const verticalZoomSlider = document.getElementById('verticalZoom');
            const verticalZoomValue = document.getElementById('verticalZoomValue');
            
            verticalZoomSlider.addEventListener('input', function() {
                verticalZoom = parseInt(this.value);
                verticalZoomValue.textContent = this.value + '%';
                verticalTransform.scale = verticalZoom / 100;
                applyPreviewTransform('vertical');
                document.getElementById('verticalZoomHint').textContent = `缩放: ${verticalZoom}%`;
                document.getElementById('verticalZoomHint').classList.add('show');
                setTimeout(() => {
                    document.getElementById('verticalZoomHint').classList.remove('show');
                }, 2000);
                updatePreviews();
            });
            
            verticalZoomSlider.addEventListener('dblclick', function() {
                verticalZoom = 100;
                verticalZoomSlider.value = 100;
                verticalZoomValue.textContent = '100%';
                verticalTransform = { x: 0, y: 0, scale: 1 };
                applyPreviewTransform('vertical');
                updatePreviews();
            });
            
            // 横图水印大小控制
            setupSliderWithInput('horizontalWatermarkSize', 'horizontalWatermarkSizeInput', 'horizontalSizeValue', (value) => {
                settings.horizontalWatermarkSize = parseFloat(value);
                updatePreviews();
                updatePositionSliderRanges(); // 更新滑块范围
            }, 22);
            
            // 横图水印透明度控制
            setupSliderWithInput('horizontalWatermarkOpacity', 'horizontalWatermarkOpacityInput', 'horizontalOpacityValue', (value) => {
                settings.horizontalWatermarkOpacity = parseInt(value) / 100;
                updatePreviews();
            }, 100);
            
            // 横图位置控制 - 修复：根据边框设置调整最大值
            setupSliderWithInput('hPositionX', 'hPositionXInput', 'hXValue', (value) => {
                horizontalPosition.x = parseFloat(value);
                updatePreviews();
            }, 50);
            
            setupSliderWithInput('hPositionY', 'hPositionYInput', 'hYValue', (value) => {
                horizontalPosition.y = parseFloat(value);
                updatePreviews();
            }, 94);
            
            // 竖图水印大小控制
            setupSliderWithInput('verticalWatermarkSize', 'verticalWatermarkSizeInput', 'verticalSizeValue', (value) => {
                settings.verticalWatermarkSize = parseFloat(value);
                updatePreviews();
                updatePositionSliderRanges(); // 更新滑块范围
            }, 45);
            
            // 竖图水印透明度控制
            setupSliderWithInput('verticalWatermarkOpacity', 'verticalWatermarkOpacityInput', 'verticalOpacityValue', (value) => {
                settings.verticalWatermarkOpacity = parseInt(value) / 100;
                updatePreviews();
            }, 100);
            
            // 竖图位置控制 - 修复：根据边框设置调整最大值
            setupSliderWithInput('vPositionX', 'vPositionXInput', 'vXValue', (value) => {
                verticalPosition.x = parseFloat(value);
                updatePreviews();
            }, 50);
            
            setupSliderWithInput('vPositionY', 'vPositionYInput', 'vYValue', (value) => {
                verticalPosition.y = parseFloat(value);
                updatePreviews();
            }, 94);
            
            // 单独照片设置控制
            setupSliderWithInput('singleWatermarkOpacity', 'singleWatermarkOpacityInput', 'singleOpacityValue', (value) => {
                settings.singleWatermarkOpacity = parseInt(value) / 100;
                applySingleSettingsAutomatically();
                updateSingleWatermarkPreview();
            }, 100);
            
            setupSliderWithInput('singleWatermarkBrightness', 'singleWatermarkBrightnessInput', 'singleBrightnessValue', (value) => {
                settings.singleWatermarkBrightness = parseInt(value);
                applySingleSettingsAutomatically();
                updateSingleWatermarkPreview();
            }, 100);
            
            setupSliderWithInput('singleWatermarkExposure', 'singleWatermarkExposureInput', 'singleExposureValue', (value) => {
                settings.singleWatermarkExposure = parseInt(value);
                applySingleSettingsAutomatically();
                updateSingleWatermarkPreview();
            }, 100);
            
            setupSliderWithInput('singleWatermarkContrast', 'singleWatermarkContrastInput', 'singleContrastValue', (value) => {
                settings.singleWatermarkContrast = parseInt(value);
                applySingleSettingsAutomatically();
                updateSingleWatermarkPreview();
            }, 100);
            
            setupSliderWithInput('singleWatermarkSaturation', 'singleWatermarkSaturationInput', 'singleSaturationValue', (value) => {
                settings.singleWatermarkSaturation = parseInt(value);
                applySingleSettingsAutomatically();
                updateSingleWatermarkPreview();
            }, 100);
            
            // 单独照片重置按钮
            document.getElementById('resetSingleSettings').addEventListener('click', resetSingleSettings);
            
            // 边框设置
            document.getElementById('borderOff').addEventListener('click', function() {
                settings.border.enabled = false;
                document.getElementById('borderOff').classList.add('active');
                document.getElementById('borderOn').classList.remove('active');
                document.getElementById('borderSettings').style.display = 'none';
                
                // 修复：当用户关闭边框时，将垂直位置重置为默认值
                horizontalPosition.y = 94;
                verticalPosition.y = 94;
                
                // 更新横图垂直位置滑块和输入框
                document.getElementById('hPositionY').value = 94;
                document.getElementById('hPositionYInput').value = 94;
                document.getElementById('hYValue').textContent = '94%';
                
                // 更新竖图垂直位置滑块和输入框
                document.getElementById('vPositionY').value = 94;
                document.getElementById('vPositionYInput').value = 94;
                document.getElementById('vYValue').textContent = '94%';
                
                updatePreviews();
                updateSingleWatermarkPreview();
                updatePositionSliderRanges(); // 修复：更新位置滑块范围
            });
            
            document.getElementById('borderOn').addEventListener('click', function() {
                settings.border.enabled = true;
                document.getElementById('borderOff').classList.remove('active');
                document.getElementById('borderOn').classList.add('active');
                document.getElementById('borderSettings').style.display = 'block';
                
                // 修复：当用户选择使用边框后，将横图预览中的垂直位置默认值改为90.5，竖图预览中的垂直位置默认值改为92
                horizontalPosition.y = 90.5;
                verticalPosition.y = 92;
                
                // 更新横图垂直位置滑块和输入框
                document.getElementById('hPositionY').value = 90.5;
                document.getElementById('hPositionYInput').value = 90.5;
                document.getElementById('hYValue').textContent = '90.5%';
                
                // 更新竖图垂直位置滑块和输入框
                document.getElementById('vPositionY').value = 92;
                document.getElementById('vPositionYInput').value = 92;
                document.getElementById('vYValue').textContent = '92%';
                
                updatePreviews();
                updateSingleWatermarkPreview();
                updatePositionSliderRanges(); // 修复：更新位置滑块范围
            });
            
            // 边框颜色
            document.getElementById('colorBlack').addEventListener('click', function() {
                settings.border.color = 'black';
                document.getElementById('colorBlack').classList.add('active');
                document.getElementById('colorWhite').classList.remove('active');
                updatePreviews();
                updateSingleWatermarkPreview();
            });
            
            document.getElementById('colorWhite').addEventListener('click', function() {
                settings.border.color = 'white';
                document.getElementById('colorBlack').classList.remove('active');
                document.getElementById('colorWhite').classList.add('active');
                updatePreviews();
                updateSingleWatermarkPreview();
            });
            
            // 边框圆角
            setupSliderWithInput('borderRadius', 'borderRadiusInput', 'radiusValue', (value) => {
                settings.border.borderRadius = parseInt(value);
                updatePreviews();
                updateSingleWatermarkPreview();
            }, 50);
            
            // 边框边距
            setupSliderWithInput('borderTop', 'borderTopInput', 'borderTopValue', (value) => {
                settings.border.top = parseInt(value);
                updatePreviews();
                updateSingleWatermarkPreview();
                updatePositionSliderRanges(); // 修复：更新位置滑块范围
            }, 100);
            
            setupSliderWithInput('borderBottom', 'borderBottomInput', 'borderBottomValue', (value) => {
                settings.border.bottom = parseInt(value);
                updatePreviews();
                updateSingleWatermarkPreview();
                updatePositionSliderRanges(); // 修复：更新位置滑块范围
            }, 100);
            
            setupSliderWithInput('borderLeft', 'borderLeftInput', 'borderLeftValue', (value) => {
                settings.border.left = parseInt(value);
                updatePreviews();
                updateSingleWatermarkPreview();
                updatePositionSliderRanges(); // 修复：更新位置滑块范围
            }, 100);
            
            setupSliderWithInput('borderRight', 'borderRightInput', 'borderRightValue', (value) => {
                settings.border.right = parseInt(value);
                updatePreviews();
                updateSingleWatermarkPreview();
                updatePositionSliderRanges(); // 修复：更新位置滑块范围
            }, 100);
            
            // 横图预设位置按钮
            const hPositionButtons = [
                {id: 'hTopLeft', x: 5, y: 5},
                {id: 'hTopCenter', x: 50, y: 5},
                {id: 'hTopRight', x: 95, y: 5},
                {id: 'hMiddleLeft', x: 5, y: 50},
                {id: 'hCenter', x: 50, y: 50},
                {id: 'hMiddleRight', x: 95, y: 50},
                {id: 'hBottomLeft', x: 5, y: 94},
                {id: 'hBottomCenter', x: 50, y: 94},
                {id: 'hBottomRight', x: 95, y: 94}
            ];
            
            hPositionButtons.forEach(btn => {
                document.getElementById(btn.id).addEventListener('click', function() {
                    horizontalPosition = { x: btn.x, y: btn.y };
                    document.getElementById('hPositionX').value = btn.x;
                    document.getElementById('hPositionXInput').value = btn.x;
                    document.getElementById('hXValue').textContent = btn.x + '%';
                    document.getElementById('hPositionY').value = btn.y;
                    document.getElementById('hPositionYInput').value = btn.y;
                    document.getElementById('hYValue').textContent = btn.y + '%';
                    updatePreviews();
                });
            });
            
            // 竖图预设位置按钮
            const vPositionButtons = [
                {id: 'vTopLeft', x: 5, y: 5},
                {id: 'vTopCenter', x: 50, y: 5},
                {id: 'vTopRight', x: 95, y: 5},
                {id: 'vMiddleLeft', x: 5, y: 50},
                {id: 'vCenter', x: 50, y: 50},
                {id: 'vMiddleRight', x: 95, y: 50},
                {id: 'vBottomLeft', x: 5, y: 94},
                {id: 'vBottomCenter', x: 50, y: 94},
                {id: 'vBottomRight', x: 95, y: 94}
            ];
            
            vPositionButtons.forEach(btn => {
                document.getElementById(btn.id).addEventListener('click', function() {
                    verticalPosition = { x: btn.x, y: btn.y };
                    document.getElementById('vPositionX').value = btn.x;
                    document.getElementById('vPositionXInput').value = btn.x;
                    document.getElementById('vXValue').textContent = btn.x + '%';
                    document.getElementById('vPositionY').value = btn.y;
                    document.getElementById('vPositionYInput').value = btn.y;
                    document.getElementById('vYValue').textContent = btn.y + '%';
                    updatePreviews();
                });
            });
            
            // 预览选择器
            document.getElementById('horizontalPreviewSelect').addEventListener('change', function() {
                const index = parseInt(this.value);
                if (!isNaN(index) && photos[index]) {
                    currentHorizontalImage = photos[index];
                    horizontalTransform = { x: 0, y: 0, scale: 1 };
                    horizontalZoom = 100;
                    document.getElementById('horizontalZoom').value = 100;
                    document.getElementById('horizontalZoomValue').textContent = '100%';
                    applyPreviewTransform('horizontal');
                    updatePreviews();
                    updatePositionSliderRanges(); // 修复：更新位置滑块范围
                }
            });
            
            document.getElementById('verticalPreviewSelect').addEventListener('change', function() {
                const index = parseInt(this.value);
                if (!isNaN(index) && photos[index]) {
                    currentVerticalImage = photos[index];
                    verticalTransform = { x: 0, y: 0, scale: 1 };
                    verticalZoom = 100;
                    document.getElementById('verticalZoom').value = 100;
                    document.getElementById('verticalZoomValue').textContent = '100%';
                    applyPreviewTransform('vertical');
                    updatePreviews();
                    updatePositionSliderRanges(); // 修复：更新位置滑块范围
                }
            });
            
            // 处理按钮
            document.getElementById('processBtn').addEventListener('click', processImages);
            
            // 初始化拖动事件
            initDragEvents();
            
            // 设置默认位置为中下
            document.getElementById('hBottomCenter').click();
            document.getElementById('vBottomCenter').click();
        }
        
        // 更新位置滑块的范围，确保水印不超出边界
        function updatePositionSliderRanges() {
            // 更新横图水平位置滑块范围
            updatePositionSliderRange('horizontal');
            // 更新竖图水平位置滑块范围
            updatePositionSliderRange('vertical');
        }
        
        // 更新水平位置滑块的范围，确保水印不超出边界
        function updatePositionSliderRange(orientation) {
            if (!watermarkImage) return;
            
            const photo = orientation === 'horizontal' ? currentHorizontalImage : currentVerticalImage;
            if (!photo) return;
            
            const watermarkSize = orientation === 'horizontal' ? 
                settings.horizontalWatermarkSize : settings.verticalWatermarkSize;
            
            // 计算水印在图片上的像素宽度
            const watermarkWidthPixels = (watermarkSize / 100) * photo.width;
            
            // 计算总宽度（图片宽度 + 边框宽度）
            const borderLeft = settings.border.enabled ? settings.border.left : 0;
            const borderRight = settings.border.enabled ? settings.border.right : 0;
            const totalWidth = photo.width + borderLeft + borderRight;
            
            // 计算水印宽度占总宽度的百分比
            const watermarkWidthPercent = (watermarkWidthPixels / totalWidth) * 100;
            
            // 计算允许的最小和最大百分比位置
            // 水印中心点不能太靠近边缘，要确保水印完全在图片内
            const minPercent = (watermarkWidthPercent / 2);
            const maxPercent = 100 - (watermarkWidthPercent / 2);
            
            const slider = orientation === 'horizontal' ? 
                document.getElementById('hPositionX') : document.getElementById('vPositionX');
            const input = orientation === 'horizontal' ? 
                document.getElementById('hPositionXInput') : document.getElementById('vPositionXInput');
            
            if (slider && input) {
                // 保存当前值
                let currentValue = parseFloat(slider.value);
                
                // 设置新的最小值和最大值
                slider.min = minPercent;
                slider.max = maxPercent;
                input.min = minPercent;
                input.max = maxPercent;
                
                // 调整当前值在新范围内
                if (currentValue < minPercent) currentValue = minPercent;
                if (currentValue > maxPercent) currentValue = maxPercent;
                
                // 更新滑块和输入框的值
                slider.value = currentValue;
                input.value = currentValue;
                
                // 更新显示
                if (orientation === 'horizontal') {
                    document.getElementById('hXValue').textContent = currentValue.toFixed(1) + '%';
                    horizontalPosition.x = currentValue;
                } else {
                    document.getElementById('vXValue').textContent = currentValue.toFixed(1) + '%';
                    verticalPosition.x = currentValue;
                }
                
                // 更新预览
                updatePreviews();
            }
        }
        
        // 更新水印相关设置状态
        function updateWatermarkControlsState() {
            const hasWatermark = watermarkImage !== null;
            const hasPhotos = photos.length > 0;
            const hasHorizontalPhotos = photos.some(p => p.orientation === 'horizontal');
            const hasVerticalPhotos = photos.some(p => p.orientation === 'vertical');
            const hasCurrentHorizontalImage = currentHorizontalImage !== null;
            const hasCurrentVerticalImage = currentVerticalImage !== null;
            
            // 横图预览设置
            const horizontalControls = [
                'horizontalWatermarkOpacity', 'horizontalWatermarkOpacityInput',
                'hPositionX', 'hPositionXInput', 'hPositionY', 'hPositionYInput',
                'horizontalWatermarkSize', 'horizontalWatermarkSizeInput',
                'horizontalPreviewSelect', 'horizontalZoom'
            ];
            
            // 横图位置按钮
            const hPositionButtons = [
                'hTopLeft', 'hTopCenter', 'hTopRight',
                'hMiddleLeft', 'hCenter', 'hMiddleRight',
                'hBottomLeft', 'hBottomCenter', 'hBottomRight'
            ];
            
            // 竖图预览设置
            const verticalControls = [
                'verticalWatermarkOpacity', 'verticalWatermarkOpacityInput',
                'vPositionX', 'vPositionXInput', 'vPositionY', 'vPositionYInput',
                'verticalWatermarkSize', 'verticalWatermarkSizeInput',
                'verticalPreviewSelect', 'verticalZoom'
            ];
            
            // 竖图位置按钮
            const vPositionButtons = [
                'vTopLeft', 'vTopCenter', 'vTopRight',
                'vMiddleLeft', 'vCenter', 'vMiddleRight',
                'vBottomLeft', 'vBottomCenter', 'vBottomRight'
            ];
            
            // 启用/禁用所有控件
            const enableControls = (controlIds, enabled) => {
                controlIds.forEach(id => {
                    const control = document.getElementById(id);
                    if (control) {
                        control.disabled = !enabled;
                    }
                });
            };
            
            // 处理预览选择器（特殊处理）
            const horizontalSelect = document.getElementById('horizontalPreviewSelect');
            const verticalSelect = document.getElementById('verticalPreviewSelect');
            
            if (horizontalSelect) {
                horizontalSelect.disabled = !(hasWatermark && hasHorizontalPhotos);
            }
            
            if (verticalSelect) {
                verticalSelect.disabled = !(hasWatermark && hasVerticalPhotos);
            }
            
            // 启用/禁用所有控件
            enableControls(horizontalControls, hasWatermark && hasCurrentHorizontalImage);
            enableControls(hPositionButtons, hasWatermark && hasCurrentHorizontalImage);
            enableControls(verticalControls, hasWatermark && hasCurrentVerticalImage);
            enableControls(vPositionButtons, hasWatermark && hasCurrentVerticalImage);
            
            // 单独调节设置的状态更新（取决于是否有水印和是否有选中照片）
            updateSingleAdjustmentControlsState();
            
            // 更新位置滑块范围
            if (hasWatermark) {
                updatePositionSliderRanges();
            }
        }
        
        // 更新方向按钮状态（选择所有横图/竖图按钮）
        function updateOrientationButtonsState() {
            const hasHorizontalPhotos = photos.some(p => p.orientation === 'horizontal');
            const hasVerticalPhotos = photos.some(p => p.orientation === 'vertical');
            const hasPhotos = photos.length > 0;
            
            // 更新选择照片区域的按钮
            document.getElementById('selectAllHorizontalList').disabled = !hasHorizontalPhotos;
            document.getElementById('selectAllVerticalList').disabled = !hasVerticalPhotos;
            
            // 更新单独调节区域的按钮
            document.getElementById('selectAllHorizontalSingle').disabled = !(hasPhotos && hasHorizontalPhotos);
            document.getElementById('selectAllVerticalSingle').disabled = !(hasPhotos && hasVerticalPhotos);
            
            // 更新单独调节区域的全选复选框
            document.getElementById('selectAllSinglePhotos').disabled = !hasPhotos;
        }
        
        // 更新单独水印调节设置状态
        function updateSingleAdjustmentControlsState() {
            const hasSelectedPhotos = selectedPhotos.size > 0;
            const hasWatermark = watermarkImage !== null;
            const hasPhotos = photos.length > 0;
            
            // 单独调节区域的控制元素
            const singleAdjustControls = [
                'selectAllHorizontalSingle', 'selectAllVerticalSingle',
                'selectAllSinglePhotos', 'resetSingleSettings'
            ];
            
            // 单独调节滑块
            const singleAdjustSliders = [
                'singleWatermarkOpacity', 'singleWatermarkOpacityInput',
                'singleWatermarkBrightness', 'singleWatermarkBrightnessInput',
                'singleWatermarkExposure', 'singleWatermarkExposureInput',
                'singleWatermarkContrast', 'singleWatermarkContrastInput',
                'singleWatermarkSaturation', 'singleWatermarkSaturationInput'
            ];
            
            // 启用/禁用所有控件
            const enableControls = (controlIds, enabled) => {
                controlIds.forEach(id => {
                    const control = document.getElementById(id);
                    if (control) {
                        control.disabled = !enabled;
                    }
                });
            };
            
            // 单独调节设置区域
            const adjustmentControls = document.getElementById('adjustmentControls');
            
            // 判断单独调节设置区域是否可用
            const isAdjustmentEnabled = hasSelectedPhotos && hasWatermark && hasPhotos;
            
            if (isAdjustmentEnabled) {
                adjustmentControls.classList.remove('disabled');
                enableControls(singleAdjustSliders, true);
            } else {
                adjustmentControls.classList.add('disabled');
                enableControls(singleAdjustSliders, false);
            }
            
            // 启用/禁用所有控件
            enableControls(singleAdjustControls, hasWatermark && hasPhotos);
        }
        
        // 应用预览变换
        function applyPreviewTransform(orientation) {
            const transformContainer = document.getElementById(orientation + 'TransformContainer');
            if (transformContainer) {
                const transform = orientation === 'horizontal' ? horizontalTransform : verticalTransform;
                transformContainer.style.transform = `translate(${transform.x}px, ${transform.y}px) scale(${transform.scale})`;
            }
        }
        
        // 设置滑块和输入框的联动
        function setupSliderWithInput(sliderId, inputId, valueSpanId, callback, defaultValue) {
            const slider = document.getElementById(sliderId);
            const input = document.getElementById(inputId);
            const valueSpan = document.getElementById(valueSpanId);
            
            if (!slider || !input || !valueSpan) return;
            
            // 滑块事件
            slider.addEventListener('input', function() {
                const value = this.value;
                input.value = value;
                // 修改：边框设置的值显示去掉px后缀
                if (sliderId.includes('border') && !sliderId.includes('borderRadius')) {
                    valueSpan.textContent = value;
                } else if (sliderId.includes('Opacity')) {
                    valueSpan.textContent = value + '%';
                } else if (sliderId.includes('Size')) {
                    valueSpan.textContent = value + '%';
                } else if (sliderId.includes('Radius')) {
                    valueSpan.textContent = value;
                } else {
                    valueSpan.textContent = value + '%';
                }
                callback(value);
            });
            
            // 输入框事件
            input.addEventListener('input', function() {
                let value = parseFloat(this.value) || 0;
                const min = parseFloat(slider.min);
                const max = parseFloat(slider.max);
                
                if (value < min) value = min;
                if (value > max) value = max;
                
                this.value = value;
                slider.value = value;
                // 修改：边框设置的值显示去掉px后缀
                if (sliderId.includes('border') && !sliderId.includes('borderRadius')) {
                    valueSpan.textContent = value;
                } else if (sliderId.includes('Opacity')) {
                    valueSpan.textContent = value + '%';
                } else if (sliderId.includes('Size')) {
                    valueSpan.textContent = value + '%';
                } else if (sliderId.includes('Radius')) {
                    valueSpan.textContent = value;
                } else {
                    valueSpan.textContent = value + '%';
                }
                callback(value);
            });
            
            // 双击滑块重置为默认值
            slider.addEventListener('dblclick', function() {
                slider.value = defaultValue;
                input.value = defaultValue;
                // 修改：边框设置的值显示去掉px后缀
                if (sliderId.includes('border') && !sliderId.includes('borderRadius')) {
                    valueSpan.textContent = defaultValue;
                } else if (sliderId.includes('Opacity')) {
                    valueSpan.textContent = defaultValue + '%';
                } else if (sliderId.includes('Size')) {
                    valueSpan.textContent = defaultValue + '%';
                } else if (sliderId.includes('Radius')) {
                    valueSpan.textContent = defaultValue;
                } else {
                    valueSpan.textContent = defaultValue + '%';
                }
                callback(defaultValue);
            });
            
            // 双击输入框重置为默认值
            input.addEventListener('dblclick', function() {
                slider.value = defaultValue;
                input.value = defaultValue;
                // 修改：边框设置的值显示去掉px后缀
                if (sliderId.includes('border') && !sliderId.includes('borderRadius')) {
                    valueSpan.textContent = defaultValue;
                } else if (sliderId.includes('Opacity')) {
                    valueSpan.textContent = defaultValue + '%';
                } else if (sliderId.includes('Size')) {
                    valueSpan.textContent = defaultValue + '%';
                } else if (sliderId.includes('Radius')) {
                    valueSpan.textContent = defaultValue;
                } else {
                    valueSpan.textContent = defaultValue + '%';
                }
                callback(defaultValue);
            });
        }
        
        // 初始化拖动事件
        function initDragEvents() {
            const horizontalCanvas = document.getElementById('horizontalCanvas');
            const verticalCanvas = document.getElementById('verticalCanvas');
            
            // 横图预览拖动
            horizontalCanvas.addEventListener('mousedown', startDragHorizontal);
            horizontalCanvas.addEventListener('mousemove', dragHorizontal);
            horizontalCanvas.addEventListener('mouseup', stopDragHorizontal);
            horizontalCanvas.addEventListener('mouseleave', stopDragHorizontal);
            
            // 竖图预览拖动
            verticalCanvas.addEventListener('mousedown', startDragVertical);
            verticalCanvas.addEventListener('mousemove', dragVertical);
            verticalCanvas.addEventListener('mouseup', stopDragVertical);
            verticalCanvas.addEventListener('mouseleave', stopDragVertical);
            
            // 触摸事件支持
            horizontalCanvas.addEventListener('touchstart', startDragHorizontalTouch);
            horizontalCanvas.addEventListener('touchmove', dragHorizontalTouch);
            horizontalCanvas.addEventListener('touchend', stopDragHorizontal);
            
            verticalCanvas.addEventListener('touchstart', startDragVerticalTouch);
            verticalCanvas.addEventListener('touchmove', dragVerticalTouch);
            verticalCanvas.addEventListener('touchend', stopDragVertical);
        }
        
        // 横图拖动事件
        function startDragHorizontal(e) {
            if (horizontalTransform.scale <= 1) return;
            isDraggingHorizontal = true;
            dragStart.x = e.clientX - horizontalTransform.x;
            dragStart.y = e.clientY - horizontalTransform.y;
            document.getElementById('horizontalCanvas').classList.add('dragging');
            document.getElementById('horizontalDragHint').classList.remove('show');
        }
        
        function dragHorizontal(e) {
            if (!isDraggingHorizontal) return;
            horizontalTransform.x = e.clientX - dragStart.x;
            horizontalTransform.y = e.clientY - dragStart.y;
            applyPreviewTransform('horizontal');
        }
        
        function stopDragHorizontal() {
            isDraggingHorizontal = false;
            document.getElementById('horizontalCanvas').classList.remove('dragging');
        }
        
        function startDragHorizontalTouch(e) {
            if (horizontalTransform.scale <= 1) return;
            e.preventDefault();
            isDraggingHorizontal = true;
            const touch = e.touches[0];
            dragStart.x = touch.clientX - horizontalTransform.x;
            dragStart.y = touch.clientY - horizontalTransform.y;
            document.getElementById('horizontalCanvas').classList.add('dragging');
            document.getElementById('horizontalDragHint').classList.remove('show');
        }
        
        function dragHorizontalTouch(e) {
            if (!isDraggingHorizontal) return;
            e.preventDefault();
            const touch = e.touches[0];
            horizontalTransform.x = touch.clientX - dragStart.x;
            horizontalTransform.y = touch.clientY - dragStart.y;
            applyPreviewTransform('horizontal');
        }
        
        // 竖图拖动事件
        function startDragVertical(e) {
            if (verticalTransform.scale <= 1) return;
            isDraggingVertical = true;
            dragStart.x = e.clientX - verticalTransform.x;
            dragStart.y = e.clientY - verticalTransform.y;
            document.getElementById('verticalCanvas').classList.add('dragging');
            document.getElementById('verticalDragHint').classList.remove('show');
        }
        
        function dragVertical(e) {
            if (!isDraggingVertical) return;
            verticalTransform.x = e.clientX - dragStart.x;
            verticalTransform.y = e.clientY - dragStart.y;
            applyPreviewTransform('vertical');
        }
        
        function stopDragVertical() {
            isDraggingVertical = false;
            document.getElementById('verticalCanvas').classList.remove('dragging');
        }
        
        function startDragVerticalTouch(e) {
            if (verticalTransform.scale <= 1) return;
            e.preventDefault();
            isDraggingVertical = true;
            const touch = e.touches[0];
            dragStart.x = touch.clientX - verticalTransform.x;
            dragStart.y = touch.clientY - verticalTransform.y;
            document.getElementById('verticalCanvas').classList.add('dragging');
            document.getElementById('verticalDragHint').classList.remove('show');
        }
        
        function dragVerticalTouch(e) {
            if (!isDraggingVertical) return;
            e.preventDefault();
            const touch = e.touches[0];
            verticalTransform.x = touch.clientX - dragStart.x;
            verticalTransform.y = touch.clientY - dragStart.y;
            applyPreviewTransform('vertical');
        }
        
        // 处理照片添加 - 追加文件
        function handlePhotoAdd(e) {
            const files = Array.from(e.target.files);
            if (files.length === 0) return;
            
            handlePhotoFiles(files, true);
            e.target.value = '';
        }
        
        function handlePhotoFiles(files, append = false) {
            if (files.length === 0) return;
            
            files.sort((a, b) => {
                return a.name.localeCompare(b.name, 'zh-CN', {numeric: true});
            });
            
            let processedCount = 0;
            const totalFiles = files.length;
            
            // 保存当前选中的照片信息（修复问题5）
            const selectedPhotoInfos = [];
            selectedPhotos.forEach(index => {
                const photo = photos[index];
                if (photo) {
                    selectedPhotoInfos.push({
                        name: photo.file.name,
                        size: photo.file.size,
                        width: photo.width,
                        height: photo.height
                    });
                }
            });
            
            files.forEach((file, index) => {
                if (!file.type.startsWith('image/')) {
                    console.log("跳过非图片文件:", file.name);
                    processedCount++;
                    if (processedCount === totalFiles) {
                        afterFilesProcessed(append, selectedPhotoInfos);
                    }
                    return;
                }
                
                const reader = new FileReader();
                reader.onload = function(e) {
                    const img = new Image();
                    img.onload = function() {
                        const canvas = document.createElement('canvas');
                        const ctx = canvas.getContext('2d');
                        
                        let thumbWidth, thumbHeight;
                        if (img.width > img.height) {
                            thumbWidth = 40;
                            thumbHeight = Math.round(40 * img.height / img.width);
                        } else {
                            thumbHeight = 40;
                            thumbWidth = Math.round(40 * img.width / img.height);
                        }
                        
                        canvas.width = thumbWidth;
                        canvas.height = thumbHeight;
                        ctx.drawImage(img, 0, 0, thumbWidth, thumbHeight);
                        
                        const photoData = {
                            file: file,
                            url: e.target.result,
                            img: img,
                            thumbnail: canvas.toDataURL(),
                            width: img.width,
                            height: img.height,
                            orientation: img.width >= img.height ? 'horizontal' : 'vertical',
                            watermarkOpacity: 1.0,
                            watermarkBrightness: 100,
                            watermarkContrast: 100,
                            watermarkSaturation: 100,
                            watermarkExposure: 100
                        };
                        
                        photos.push(photoData);
                        processedCount++;
                        
                        if (processedCount === totalFiles) {
                            afterFilesProcessed(append, selectedPhotoInfos);
                        }
                    };
                    img.onerror = function() {
                        console.error("无法加载图片:", file.name);
                        processedCount++;
                        if (processedCount === totalFiles) {
                            afterFilesProcessed(append, selectedPhotoInfos);
                        }
                    };
                    img.src = e.target.result;
                };
                reader.onerror = function() {
                    console.error("无法读取文件:", file.name);
                    processedCount++;
                    if (processedCount === totalFiles) {
                        afterFilesProcessed(append, selectedPhotoInfos);
                    }
                };
                reader.readAsDataURL(file);
            });
        }
        
        function afterFilesProcessed(append, selectedPhotoInfos = []) {
            // 对照片进行排序
            photos.sort((a, b) => {
                return a.file.name.localeCompare(b.file.name, 'zh-CN', {numeric: true});
            });
            
            // 重新匹配选中的照片（修复问题5）
            const newSelectedPhotos = new Set();
            if (selectedPhotoInfos.length > 0) {
                photos.forEach((photo, index) => {
                    // 查找是否有匹配的已选中照片
                    const isSelected = selectedPhotoInfos.some(info => 
                        info.name === photo.file.name && 
                        info.size === photo.file.size &&
                        info.width === photo.width &&
                        info.height === photo.height
                    );
                    if (isSelected) {
                        newSelectedPhotos.add(index);
                    }
                });
            }
            selectedPhotos = newSelectedPhotos;
            
            updatePhotoList();
            updateSinglePhotoSelector();
            updatePreviewSelectors();
            
            // 修复：只有当有对应方向的照片时才设置预览图片
            const firstHorizontal = photos.find(p => p.orientation === 'horizontal');
            const firstVertical = photos.find(p => p.orientation === 'vertical');
            
            if (firstHorizontal) {
                currentHorizontalImage = firstHorizontal;
                const hIndex = photos.indexOf(firstHorizontal);
                document.getElementById('horizontalPreviewSelect').value = hIndex;
            } else {
                currentHorizontalImage = null;
                // 清空横图预览
                const horizontalCanvas = document.getElementById('horizontalCanvas');
                const ctx = horizontalCanvas.getContext('2d');
                ctx.clearRect(0, 0, horizontalCanvas.width, horizontalCanvas.height);
                document.getElementById('horizontalSize').textContent = '未选择';
            }
            
            if (firstVertical) {
                currentVerticalImage = firstVertical;
                const vIndex = photos.indexOf(firstVertical);
                document.getElementById('verticalPreviewSelect').value = vIndex;
            } else {
                currentVerticalImage = null;
                // 清空竖图预览
                const verticalCanvas = document.getElementById('verticalCanvas');
                const ctx = verticalCanvas.getContext('2d');
                ctx.clearRect(0, 0, verticalCanvas.width, verticalCanvas.height);
                document.getElementById('verticalSize').textContent = '未选择';
            }
            
            updatePreviews();
            updateSingleWatermarkPreview();
            updateProcessButton();
            updateSelectAllCheckbox();
            updateWatermarkControlsState();
            updateOrientationButtonsState(); // 更新方向按钮状态
            updatePositionSliderRanges(); // 更新位置滑块范围
        }
        
        // 更新照片列表显示
        function updatePhotoList() {
            const photoListContainer = document.getElementById('photoListContainer');
            
            document.getElementById('photoCount').textContent = photos.length;
            
            if (photos.length === 0) {
                photoListContainer.innerHTML = '<div class="no-photos-message">尚未选择任何照片</div>';
                return;
            }
            
            let html = '';
            
            photos.forEach((photo, index) => {
                const isChecked = photoCheckboxes.has(index);
                const orientationText = photo.orientation === 'horizontal' ? '横图' : '竖图';
                const dimensions = `${photo.width}×${photo.height}`;
                const size = formatFileSize(photo.file.size);
                
                html += `
                <div class="photo-item" data-index="${index}">
                    <input type="checkbox" class="photo-checkbox photo-item-checkbox" ${isChecked ? 'checked' : ''} data-index="${index}">
                    <div class="photo-preview">
                        <img src="${photo.thumbnail}" alt="${photo.file.name}" loading="lazy">
                    </div>
                    <div class="photo-info">
                        <div class="photo-name" title="${photo.file.name}">${photo.file.name}</div>
                        <div class="photo-details">
                            <span><i class="fas fa-expand-arrows-alt"></i> ${dimensions}</span>
                            <span><i class="fas fa-database"></i> ${size}</span>
                            <span><i class="fas fa-${photo.orientation === 'horizontal' ? 'arrows-alt-h' : 'arrows-alt-v'}"></i> ${orientationText}</span>
                        </div>
                    </div>
                </div>
                `;
            });
            
            photoListContainer.innerHTML = html;
            
            document.querySelectorAll('.photo-item-checkbox').forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    const index = parseInt(this.getAttribute('data-index'));
                    if (this.checked) {
                        photoCheckboxes.add(index);
                    } else {
                        photoCheckboxes.delete(index);
                    }
                    updateSelectAllCheckbox();
                });
            });
        }
        
        // 更新全选复选框状态
        function updateSelectAllCheckbox() {
            const selectAllCheckbox = document.getElementById('selectAllCheckbox');
            const checkboxes = document.querySelectorAll('.photo-item-checkbox');
            const checkedCount = document.querySelectorAll('.photo-item-checkbox:checked').length;
            
            if (checkboxes.length === 0) {
                selectAllCheckbox.checked = false;
                selectAllCheckbox.indeterminate = false;
            } else if (checkedCount === 0) {
                selectAllCheckbox.checked = false;
                selectAllCheckbox.indeterminate = false;
            } else if (checkedCount === checkboxes.length) {
                selectAllCheckbox.checked = true;
                selectAllCheckbox.indeterminate = false;
            } else {
                selectAllCheckbox.checked = false;
                selectAllCheckbox.indeterminate = true;
            }
        }
        
        // 减去选中的照片
        function removeSelectedPhotos() {
            if (photoCheckboxes.size === 0) {
                return;
            }
            
            const indicesToRemove = Array.from(photoCheckboxes).sort((a, b) => b - a);
            
            indicesToRemove.forEach(index => {
                if (index < photos.length) {
                    photos.splice(index, 1);
                }
            });
            
            // 重新计算选中的照片索引
            const newSelectedPhotos = new Set();
            selectedPhotos.forEach(index => {
                let newIndex = index;
                indicesToRemove.forEach(removedIndex => {
                    if (index > removedIndex) {
                        newIndex--;
                    }
                });
                if (newIndex >= 0) {
                    newSelectedPhotos.add(newIndex);
                }
            });
            selectedPhotos = newSelectedPhotos;
            
            photoCheckboxes.clear();
            
            document.getElementById('selectAllCheckbox').checked = false;
            document.getElementById('selectAllCheckbox').indeterminate = false;
            
            updatePhotoList();
            updateSinglePhotoSelector();
            updatePreviewSelectors();
            
            if (photos.length > 0) {
                // 修复：检查横图和竖图是否存在
                const firstHorizontal = photos.find(p => p.orientation === 'horizontal');
                const firstVertical = photos.find(p => p.orientation === 'vertical');
                
                if (currentHorizontalImage && !photos.includes(currentHorizontalImage)) {
                    currentHorizontalImage = firstHorizontal || null;
                }
                if (currentVerticalImage && !photos.includes(currentVerticalImage)) {
                    currentVerticalImage = firstVertical || null;
                }
                
                // 更新预览选择器
                if (currentHorizontalImage) {
                    const hIndex = photos.indexOf(currentHorizontalImage);
                    if (hIndex !== -1) {
                        document.getElementById('horizontalPreviewSelect').value = hIndex;
                    }
                }
                if (currentVerticalImage) {
                    const vIndex = photos.indexOf(currentVerticalImage);
                    if (vIndex !== -1) {
                        document.getElementById('verticalPreviewSelect').value = vIndex;
                    }
                }
                
                updatePreviews();
                updateSingleWatermarkPreview();
                updatePositionSliderRanges(); // 更新位置滑块范围
            } else {
                currentHorizontalImage = null;
                currentVerticalImage = null;
                
                const horizontalCanvas = document.getElementById('horizontalCanvas');
                const verticalCanvas = document.getElementById('verticalCanvas');
                const singlePreviewCanvas = document.getElementById('singlePreviewCanvas');
                const ctx1 = horizontalCanvas.getContext('2d');
                const ctx2 = verticalCanvas.getContext('2d');
                const ctx3 = singlePreviewCanvas.getContext('2d');
                ctx1.clearRect(0, 0, horizontalCanvas.width, horizontalCanvas.height);
                ctx2.clearRect(0, 0, verticalCanvas.width, verticalCanvas.height);
                ctx3.clearRect(0, 0, singlePreviewCanvas.width, singlePreviewCanvas.height);
                
                document.getElementById('horizontalSize').textContent = '未选择';
                document.getElementById('verticalSize').textContent = '未选择';
            }
            
            updateProcessButton();
            updateSingleAdjustmentControlsState();
            updateWatermarkControlsState();
            updateOrientationButtonsState(); // 更新方向按钮状态
        }
        
        // 清空所有照片
        function clearAllPhotos() {
            if (photos.length === 0) {
                return;
            }
            
            if (!confirm(`确定要清空所有 ${photos.length} 张照片吗？`)) {
                return;
            }
            
            photos = [];
            selectedPhotos.clear();
            photoCheckboxes.clear();
            currentHorizontalImage = null;
            currentVerticalImage = null;
            
            photoInputCleared = true;
            
            updatePhotoList();
            updateSinglePhotoSelector();
            updatePreviewSelectors();
            
            const horizontalCanvas = document.getElementById('horizontalCanvas');
            const verticalCanvas = document.getElementById('verticalCanvas');
            const singlePreviewCanvas = document.getElementById('singlePreviewCanvas');
            const ctx1 = horizontalCanvas.getContext('2d');
            const ctx2 = verticalCanvas.getContext('2d');
            const ctx3 = singlePreviewCanvas.getContext('2d');
            ctx1.clearRect(0, 0, horizontalCanvas.width, horizontalCanvas.height);
            ctx2.clearRect(0, 0, verticalCanvas.width, verticalCanvas.height);
            ctx3.clearRect(0, 0, singlePreviewCanvas.width, singlePreviewCanvas.height);
            
            document.getElementById('horizontalSize').textContent = '未选择';
            document.getElementById('verticalSize').textContent = '未选择';
            
            document.getElementById('selectAllCheckbox').checked = false;
            document.getElementById('selectAllCheckbox').indeterminate = false;
            document.getElementById('selectAllSinglePhotos').checked = false;
            
            updateProcessButton();
            updateSingleAdjustmentControlsState();
            updateWatermarkControlsState();
            updateOrientationButtonsState(); // 更新方向按钮状态
        }
        
        // 在选择照片列表中选择所有横图
        function selectAllPhotosByOrientationInList(orientation) {
            if (photos.length === 0) {
                return;
            }
            
            photoCheckboxes.clear();
            
            photos.forEach((photo, index) => {
                if (photo.orientation === orientation) {
                    photoCheckboxes.add(index);
                }
            });
            
            updatePhotoList();
            updateSelectAllCheckbox();
        }
        
        // 更新单独照片选择器
        function updateSinglePhotoSelector() {
            const singlePhotoSelector = document.getElementById('singlePhotoSelector');
            
            if (photos.length === 0) {
                singlePhotoSelector.innerHTML = '<div class="no-photos-message">请先选择照片</div>';
                document.getElementById('singleSelectedCount').textContent = '0';
                return;
            }
            
            let html = '';
            
            photos.forEach((photo, index) => {
                const isSelected = selectedPhotos.has(index);
                const orientationText = photo.orientation === 'horizontal' ? '横图' : '竖图';
                const dimensions = `${photo.width}×${photo.height}`;
                
                html += `
                <div class="single-photo-item ${isSelected ? 'selected' : ''}" data-index="${index}">
                    <input type="checkbox" class="photo-checkbox" ${isSelected ? 'checked' : ''} data-index="${index}">
                    <div class="single-photo-preview">
                        <img src="${photo.thumbnail}" alt="${photo.file.name}" loading="lazy">
                    </div>
                    <div class="single-photo-info">
                        <div class="single-photo-name" title="${photo.file.name}">${photo.file.name}</div>
                        <div class="single-photo-details">
                            <span><i class="fas fa-expand-arrows-alt"></i> ${dimensions}</span>
                            <span><i class="fas fa-${photo.orientation === 'horizontal' ? 'arrows-alt-h' : 'arrows-alt-v'}"></i> ${orientationText}</span>
                        </div>
                    </div>
                </div>
                `;
            });
            
            singlePhotoSelector.innerHTML = html;
            
            // 添加点击事件
            document.querySelectorAll('#singlePhotoSelector .photo-checkbox').forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    const index = parseInt(this.getAttribute('data-index'));
                    const wasChecked = this.checked;
                    
                    if (wasChecked) {
                        selectedPhotos.add(index);
                        // 应用当前单独水印调节设置到新选择的照片
                        const photo = photos[index];
                        if (photo) {
                            photo.watermarkOpacity = settings.singleWatermarkOpacity;
                            photo.watermarkBrightness = settings.singleWatermarkBrightness;
                            photo.watermarkContrast = settings.singleWatermarkContrast;
                            photo.watermarkSaturation = settings.singleWatermarkSaturation;
                            photo.watermarkExposure = settings.singleWatermarkExposure;
                        }
                    } else {
                        selectedPhotos.delete(index);
                        // 取消选择时重置该照片的设置
                        const photo = photos[index];
                        if (photo) {
                            photo.watermarkOpacity = 1.0;
                            photo.watermarkBrightness = 100;
                            photo.watermarkContrast = 100;
                            photo.watermarkSaturation = 100;
                            photo.watermarkExposure = 100;
                        }
                    }
                    
                    const item = this.closest('.single-photo-item');
                    if (wasChecked) {
                        item.classList.add('selected');
                    } else {
                        item.classList.remove('selected');
                    }
                    
                    document.getElementById('singleSelectedCount').textContent = selectedPhotos.size;
                    updateSingleAdjustmentControlsState();
                    updateSingleWatermarkPreview();
                    updateSingleSelectAllCheckbox();
                    updatePreviews();
                });
            });
            
            // 点击整行也可以切换选择
            document.querySelectorAll('#singlePhotoSelector .single-photo-item').forEach(item => {
                item.addEventListener('click', function(e) {
                    if (e.target.type !== 'checkbox') {
                        const checkbox = this.querySelector('.photo-checkbox');
                        checkbox.checked = !checkbox.checked;
                        checkbox.dispatchEvent(new Event('change'));
                    }
                });
            });
            
            document.getElementById('singleSelectedCount').textContent = selectedPhotos.size;
            updateSingleSelectAllCheckbox();
        }
        
        // 更新单独调节功能区的全选复选框状态
        function updateSingleSelectAllCheckbox() {
            const selectAllCheckbox = document.getElementById('selectAllSinglePhotos');
            const checkboxes = document.querySelectorAll('#singlePhotoSelector .photo-checkbox');
            const checkedCount = document.querySelectorAll('#singlePhotoSelector .photo-checkbox:checked').length;
            
            if (checkboxes.length === 0) {
                selectAllCheckbox.checked = false;
                selectAllCheckbox.indeterminate = false;
            } else if (checkedCount === 0) {
                selectAllCheckbox.checked = false;
                selectAllCheckbox.indeterminate = false;
            } else if (checkedCount === checkboxes.length) {
                selectAllCheckbox.checked = true;
                selectAllCheckbox.indeterminate = false;
            } else {
                selectAllCheckbox.checked = false;
                selectAllCheckbox.indeterminate = true;
            }
        }
        
        // 在照片水印单独调节功能区选择所有横图或竖图
        function selectAllPhotosByOrientation(orientation) {
            if (photos.length === 0) {
                return;
            }
            
            // 清空当前选择
            selectedPhotos.clear();
            
            // 根据方向选择照片
            photos.forEach((photo, index) => {
                if (photo.orientation === orientation) {
                    selectedPhotos.add(index);
                    // 应用当前单独水印调节设置到选择的照片
                    photo.watermarkOpacity = settings.singleWatermarkOpacity;
                    photo.watermarkBrightness = settings.singleWatermarkBrightness;
                    photo.watermarkContrast = settings.singleWatermarkContrast;
                    photo.watermarkSaturation = settings.singleWatermarkSaturation;
                    photo.watermarkExposure = settings.singleWatermarkExposure;
                } else {
                    // 未选择的照片重置设置
                    photo.watermarkOpacity = 1.0;
                    photo.watermarkBrightness = 100;
                    photo.watermarkContrast = 100;
                    photo.watermarkSaturation = 100;
                    photo.watermarkExposure = 100;
                }
            });
            
            updateSinglePhotoSelector();
            updateSingleAdjustmentControlsState();
            updateSingleWatermarkPreview();
            updatePreviews();
        }
        
        // 处理水印选择
        function handleWatermarkSelect(e) {
            const file = e.target.files[0];
            if (!file) return;
            
            watermarkOriginalFile = file;
            
            const reader = new FileReader();
            reader.onload = function(e) {
                watermarkImage = new Image();
                watermarkImage.onload = function() {
                    const previewContainer = document.getElementById('watermarkPreview');
                    previewContainer.innerHTML = `<img src="${e.target.result}" alt="水印预览" style="max-width: 100%; max-height: 100%; object-fit: contain;">`;
                    
                    const watermarkInfo = document.getElementById('watermarkInfo');
                    watermarkInfo.innerHTML = `
                        <div class="watermark-info-item">
                            <div class="watermark-info-label">文件名</div>
                            <div class="watermark-info-value">${file.name}</div>
                        </div>
                        <div class="watermark-info-item">
                            <div class="watermark-info-label">尺寸</div>
                            <div class="watermark-info-value">${watermarkImage.width}×${watermarkImage.height}px</div>
                        </div>
                        <div class="watermark-info-item">
                            <div class="watermark-info-label">大小</div>
                            <div class="watermark-info-value">${formatFileSize(file.size)}</div>
                        </div>
                        <div class="watermark-info-item">
                            <div class="watermark-info-label">格式</div>
                            <div class="watermark-info-value">PNG</div>
                        </div>
                    `;
                    
                    updatePreviews();
                    updateSingleWatermarkPreview();
                    updateProcessButton();
                    
                    // 关键修复：当用户选择了照片后才选择水印图片，这时单独水印调节设置区域的参数调节应该变为可用
                    updateWatermarkControlsState();
                    updateOrientationButtonsState(); // 更新方向按钮状态
                };
                watermarkImage.onerror = function() {
                    alert('无法加载水印图片，请确保文件格式正确');
                };
                watermarkImage.src = e.target.result;
            };
            reader.onerror = function() {
                alert('无法读取水印文件');
            };
            reader.readAsDataURL(file);
        }
        
        // 更新预览选择器
        function updatePreviewSelectors() {
            const horizontalSelect = document.getElementById('horizontalPreviewSelect');
            const verticalSelect = document.getElementById('verticalPreviewSelect');
            
            horizontalSelect.innerHTML = '';
            verticalSelect.innerHTML = '';
            
            // 修复：只显示对应方向的照片
            photos.forEach((photo, index) => {
                const option = document.createElement('option');
                option.value = index;
                option.textContent = `${photo.file.name} (${photo.width}×${photo.height})`;
                
                if (photo.orientation === 'horizontal') {
                    horizontalSelect.appendChild(option.cloneNode(true));
                } else {
                    verticalSelect.appendChild(option);
                }
            });
            
            // 修复：只有当有对应方向的照片时才设置选择器值
            if (currentHorizontalImage) {
                const hIndex = photos.indexOf(currentHorizontalImage);
                if (hIndex !== -1) {
                    horizontalSelect.value = hIndex;
                } else {
                    // 如果当前横图预览图片不在照片列表中，尝试找到第一张横图
                    const firstHorizontal = photos.find(p => p.orientation === 'horizontal');
                    if (firstHorizontal) {
                        const hIndex = photos.indexOf(firstHorizontal);
                        horizontalSelect.value = hIndex;
                        currentHorizontalImage = firstHorizontal;
                    } else {
                        horizontalSelect.innerHTML = '<option value="">无横图</option>';
                        currentHorizontalImage = null;
                    }
                }
            } else {
                const firstHorizontal = photos.find(p => p.orientation === 'horizontal');
                if (firstHorizontal) {
                    const hIndex = photos.indexOf(firstHorizontal);
                    horizontalSelect.value = hIndex;
                    currentHorizontalImage = firstHorizontal;
                } else {
                    horizontalSelect.innerHTML = '<option value="">无横图</option>';
                }
            }
            
            if (currentVerticalImage) {
                const vIndex = photos.indexOf(currentVerticalImage);
                if (vIndex !== -1) {
                    verticalSelect.value = vIndex;
                } else {
                    // 如果当前竖图预览图片不在照片列表中，尝试找到第一张竖图
                    const firstVertical = photos.find(p => p.orientation === 'vertical');
                    if (firstVertical) {
                        const vIndex = photos.indexOf(firstVertical);
                        verticalSelect.value = vIndex;
                        currentVerticalImage = firstVertical;
                    } else {
                        verticalSelect.innerHTML = '<option value="">无竖图</option>';
                        currentVerticalImage = null;
                    }
                }
            } else {
                const firstVertical = photos.find(p => p.orientation === 'vertical');
                if (firstVertical) {
                    const vIndex = photos.indexOf(firstVertical);
                    verticalSelect.value = vIndex;
                    currentVerticalImage = firstVertical;
                } else {
                    verticalSelect.innerHTML = '<option value="">无竖图</option>';
                }
            }
        }
        
        // 更新预览 - 修复：现在会正确应用单独调节设置
        function updatePreviews() {
            if (currentHorizontalImage) {
                drawPreview('horizontal', currentHorizontalImage);
                // 启用横图缩放控制
                document.getElementById('horizontalZoom').disabled = false;
            } else {
                // 如果没有横图，清空横图预览并禁用缩放控制
                const horizontalCanvas = document.getElementById('horizontalCanvas');
                const ctx = horizontalCanvas.getContext('2d');
                ctx.clearRect(0, 0, horizontalCanvas.width, horizontalCanvas.height);
                document.getElementById('horizontalDragHint').classList.remove('show');
                document.getElementById('horizontalZoomHint').classList.remove('show');
                document.getElementById('horizontalSize').textContent = '未选择';
                // 禁用横图缩放控制
                document.getElementById('horizontalZoom').disabled = true;
            }
            
            if (currentVerticalImage) {
                drawPreview('vertical', currentVerticalImage);
                // 启用竖图缩放控制
                document.getElementById('verticalZoom').disabled = false;
            } else {
                // 如果没有竖图，清空竖图预览并禁用缩放控制
                const verticalCanvas = document.getElementById('verticalCanvas');
                const ctx = verticalCanvas.getContext('2d');
                ctx.clearRect(0, 0, verticalCanvas.width, verticalCanvas.height);
                document.getElementById('verticalDragHint').classList.remove('show');
                document.getElementById('verticalZoomHint').classList.remove('show');
                document.getElementById('verticalSize').textContent = '未选择';
                // 禁用竖图缩放控制
                document.getElementById('verticalZoom').disabled = true;
            }
            
            // 只有在有对应方向照片且有水印时才显示拖动提示
            if (horizontalTransform.scale > 1 && currentHorizontalImage && watermarkImage) {
                document.getElementById('horizontalDragHint').classList.add('show');
            } else {
                document.getElementById('horizontalDragHint').classList.remove('show');
            }
            
            if (verticalTransform.scale > 1 && currentVerticalImage && watermarkImage) {
                document.getElementById('verticalDragHint').classList.add('show');
            } else {
                document.getElementById('verticalDragHint').classList.remove('show');
            }
        }
        
        // 更新单独水印预览 - 修复：现在会实时更新预览
        function updateSingleWatermarkPreview() {
            const canvas = document.getElementById('singlePreviewCanvas');
            const ctx = canvas.getContext('2d');
            
            const container = canvas.parentElement;
            const maxWidth = container.clientWidth;
            const maxHeight = container.clientHeight;
            
            canvas.width = maxWidth;
            canvas.height = maxHeight;
            
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            if (!watermarkImage) {
                ctx.fillStyle = '#2c3e50';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                ctx.fillStyle = '#bdc3c7';
                ctx.font = '16px Arial';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText('请先选择水印图片', canvas.width/2, canvas.height/2);
                return;
            }
            
            const scale = Math.min(
                maxWidth / watermarkImage.width,
                maxHeight / watermarkImage.height
            );
            const displayWidth = watermarkImage.width * scale;
            const displayHeight = watermarkImage.height * scale;
            
            const x = (maxWidth - displayWidth) / 2;
            const y = (maxHeight - displayHeight) / 2;
            
            ctx.save();
            ctx.globalAlpha = settings.singleWatermarkOpacity;
            
            // 修复：正确应用所有滤镜效果
            let filterString = `brightness(${settings.singleWatermarkBrightness}%) contrast(${settings.singleWatermarkContrast}%) saturate(${settings.singleWatermarkSaturation}%)`;
            
            // 处理曝光度（曝光度也是通过亮度调整实现的）
            if (settings.singleWatermarkExposure !== 100) {
                // 曝光度调整：计算最终亮度值
                const exposureFactor = settings.singleWatermarkExposure / 100;
                const finalBrightness = settings.singleWatermarkBrightness * exposureFactor;
                filterString = `brightness(${finalBrightness}%) contrast(${settings.singleWatermarkContrast}%) saturate(${settings.singleWatermarkSaturation}%)`;
            }
            
            ctx.filter = filterString;
            
            ctx.drawImage(watermarkImage, x, y, displayWidth, displayHeight);
            ctx.restore();
            
            // 绘制边框
            ctx.strokeStyle = '#27ae60';
            ctx.lineWidth = 2;
            ctx.setLineDash([5, 5]);
            ctx.strokeRect(x, y, displayWidth, displayHeight);
            ctx.setLineDash([]);
        }
        
        // 绘制预览 - 修复：现在会正确应用单独调节设置到预览
        function drawPreview(orientation, photo) {
            const canvasId = orientation === 'horizontal' ? 'horizontalCanvas' : 'verticalCanvas';
            const sizeSpanId = orientation === 'horizontal' ? 'horizontalSize' : 'verticalSize';
            const canvas = document.getElementById(canvasId);
            const ctx = canvas.getContext('2d');
            
            const container = document.getElementById(orientation + 'TransformContainer');
            const containerWidth = container.parentElement.clientWidth;
            const containerHeight = container.parentElement.clientHeight;
            
            canvas.width = containerWidth;
            canvas.height = containerHeight;
            
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            document.getElementById(sizeSpanId).textContent = 
                `${photo.file.name} (${photo.width}×${photo.height})`;
            
            const borderLeft = settings.border.left;
            const borderRight = settings.border.right;
            const borderTop = settings.border.top;
            const borderBottom = settings.border.bottom;
            
            let totalWidth = photo.width;
            let totalHeight = photo.height;
            
            if (settings.border.enabled) {
                totalWidth += borderLeft + borderRight;
                totalHeight += borderTop + borderBottom;
            }
            
            const scale = Math.min(
                canvas.width / totalWidth,
                canvas.height / totalHeight
            );
            
            const displayWidth = photo.width * scale;
            const displayHeight = photo.height * scale;
            const borderLeftDisplay = borderLeft * scale;
            const borderRightDisplay = borderRight * scale;
            const borderTopDisplay = borderTop * scale;
            const borderBottomDisplay = borderBottom * scale;
            const totalWidthDisplay = displayWidth + borderLeftDisplay + borderRightDisplay;
            const totalHeightDisplay = displayHeight + borderTopDisplay + borderBottomDisplay;
            
            // 修复：计算边框绘制位置
            const borderX = (canvas.width - totalWidthDisplay) / 2;
            const borderY = (canvas.height - totalHeightDisplay) / 2;
            
            // 修复：计算照片绘制位置（在边框内部）
            const drawX = borderX + borderLeftDisplay;
            const drawY = borderY + borderTopDisplay;
            
            if (settings.border.enabled) {
                const borderColor = settings.border.color === 'white' ? '#FFFFFF' : '#000000';
                
                ctx.fillStyle = borderColor;
                ctx.fillRect(borderX, borderY, totalWidthDisplay, totalHeightDisplay);
                
                ctx.save();
                
                // 修复问题2：根据照片的实际分辨率计算圆角
                // 使用设置的圆角像素值，但需要根据显示比例进行缩放
                const borderRadiusPixels = settings.border.borderRadius; // 用户设置的圆角像素值
                const borderRadiusDisplay = borderRadiusPixels * scale; // 显示时的圆角大小
                
                if (borderRadiusDisplay > 0) {
                    ctx.beginPath();
                    ctx.roundRect(drawX, drawY, displayWidth, displayHeight, borderRadiusDisplay);
                    ctx.clip();
                }
                
                ctx.drawImage(photo.img, drawX, drawY, displayWidth, displayHeight);
                ctx.restore();
            } else {
                const photoScale = Math.min(canvas.width / photo.width, canvas.height / photo.height);
                const photoDisplayWidth = photo.width * photoScale;
                const photoDisplayHeight = photo.height * photoScale;
                const photoDrawX = (canvas.width - photoDisplayWidth) / 2;
                const photoDrawY = (canvas.height - photoDisplayHeight) / 2;
                
                ctx.drawImage(photo.img, photoDrawX, photoDrawY, photoDisplayWidth, photoDisplayHeight);
            }
            
            if (watermarkImage) {
                const position = orientation === 'horizontal' ? horizontalPosition : verticalPosition;
                const watermarkSize = orientation === 'horizontal' ? 
                    settings.horizontalWatermarkSize : settings.verticalWatermarkSize;
                
                // 修复：检查当前照片是否在单独调节列表中，如果是则使用照片自身的透明度，否则使用全局透明度
                const photoIndex = photos.indexOf(photo);
                let opacity;
                let brightness, contrast, saturation, exposure;
                
                if (selectedPhotos.has(photoIndex)) {
                    opacity = photo.watermarkOpacity;
                    brightness = photo.watermarkBrightness;
                    contrast = photo.watermarkContrast;
                    saturation = photo.watermarkSaturation;
                    exposure = photo.watermarkExposure;
                } else {
                    opacity = orientation === 'horizontal' ? 
                        settings.horizontalWatermarkOpacity : settings.verticalWatermarkOpacity;
                    brightness = 100;
                    contrast = 100;
                    saturation = 100;
                    exposure = 100;
                }
                
                const watermarkDisplayWidth = (watermarkSize / 100) * displayWidth;
                const watermarkDisplayHeight = (watermarkImage.height / watermarkImage.width) * watermarkDisplayWidth;
                
                let watermarkX, watermarkY;
                
                // 修复：根据边框设置正确计算水印位置
                if (settings.border.enabled) {
                    // 当有边框时，水印可以放置在包括边框的整个区域
                    watermarkX = borderX + (position.x / 100) * totalWidthDisplay - watermarkDisplayWidth / 2;
                    watermarkY = borderY + (position.y / 100) * totalHeightDisplay - watermarkDisplayHeight / 2;
                } else {
                    // 当没有边框时，水印只能放置在照片区域内
                    const photoScale = Math.min(canvas.width / photo.width, canvas.height / photo.height);
                    const photoDisplayWidth = photo.width * photoScale;
                    const photoDisplayHeight = photo.height * photoScale;
                    const photoDrawX = (canvas.width - photoDisplayWidth) / 2;
                    const photoDrawY = (canvas.height - photoDisplayHeight) / 2;
                    
                    watermarkX = photoDrawX + (position.x / 100) * photoDisplayWidth - watermarkDisplayWidth / 2;
                    watermarkY = photoDrawY + (position.y / 100) * photoDisplayHeight - watermarkDisplayHeight / 2;
                }
                
                // 确保水印不会超出画布边界
                watermarkX = Math.max(0, Math.min(watermarkX, canvas.width - watermarkDisplayWidth));
                watermarkY = Math.max(0, Math.min(watermarkY, canvas.height - watermarkDisplayHeight));
                
                ctx.save();
                ctx.globalAlpha = opacity;
                
                // 修复：正确应用所有滤镜效果
                let filterString = `brightness(${brightness}%) contrast(${contrast}%) saturate(${saturation}%)`;
                
                // 处理曝光度（曝光度也是通过亮度调整实现的）
                if (exposure !== 100) {
                    // 曝光度调整：计算最终亮度值
                    const exposureFactor = exposure / 100;
                    const finalBrightness = brightness * exposureFactor;
                    filterString = `brightness(${finalBrightness}%) contrast(${contrast}%) saturate(${saturation}%)`;
                }
                
                ctx.filter = filterString;
                
                ctx.drawImage(watermarkImage, watermarkX, watermarkY, watermarkDisplayWidth, watermarkDisplayHeight);
                ctx.restore();
                
                // 绘制水印边框
                ctx.strokeStyle = '#3498db';
                ctx.lineWidth = 2;
                ctx.setLineDash([5, 5]);
                ctx.strokeRect(watermarkX, watermarkY, watermarkDisplayWidth, watermarkDisplayHeight);
                ctx.setLineDash([]);
            }
        }
        
        // 自动应用单独设置到选中的照片 - 修复：现在会正确更新所有预览
        function applySingleSettingsAutomatically() {
            if (selectedPhotos.size === 0) {
                return;
            }
            
            selectedPhotos.forEach(index => {
                const photo = photos[index];
                if (photo) {
                    photo.watermarkOpacity = settings.singleWatermarkOpacity;
                    photo.watermarkBrightness = settings.singleWatermarkBrightness;
                    photo.watermarkContrast = settings.singleWatermarkContrast;
                    photo.watermarkSaturation = settings.singleWatermarkSaturation;
                    photo.watermarkExposure = settings.singleWatermarkExposure;
                }
            });
            
            // 修复：立即更新所有预览
            updatePreviews();
        }
        
        // 重置单独设置
        function resetSingleSettings() {
            if (selectedPhotos.size === 0) {
                return;
            }
            
            selectedPhotos.forEach(index => {
                const photo = photos[index];
                if (photo) {
                    photo.watermarkOpacity = 1.0;
                    photo.watermarkBrightness = 100;
                    photo.watermarkContrast = 100;
                    photo.watermarkSaturation = 100;
                    photo.watermarkExposure = 100;
                }
            });
            
            // 重置滑块值
            document.getElementById('singleWatermarkOpacity').value = 100;
            document.getElementById('singleWatermarkOpacityInput').value = 100;
            document.getElementById('singleOpacityValue').textContent = '100%';
            
            document.getElementById('singleWatermarkBrightness').value = 100;
            document.getElementById('singleWatermarkBrightnessInput').value = 100;
            document.getElementById('singleBrightnessValue').textContent = '100%';
            
            document.getElementById('singleWatermarkContrast').value = 100;
            document.getElementById('singleWatermarkContrastInput').value = 100;
            document.getElementById('singleContrastValue').textContent = '100%';
            
            document.getElementById('singleWatermarkSaturation').value = 100;
            document.getElementById('singleWatermarkSaturationInput').value = 100;
            document.getElementById('singleSaturationValue').textContent = '100%';
            
            document.getElementById('singleWatermarkExposure').value = 100;
            document.getElementById('singleWatermarkExposureInput').value = 100;
            document.getElementById('singleExposureValue').textContent = '100%';
            
            // 重置设置
            settings.singleWatermarkOpacity = 1.0;
            settings.singleWatermarkBrightness = 100;
            settings.singleWatermarkContrast = 100;
            settings.singleWatermarkSaturation = 100;
            settings.singleWatermarkExposure = 100;
            
            // 更新所有预览
            updatePreviews();
            updateSingleWatermarkPreview();
        }
        
        // 更新处理按钮状态
        function updateProcessButton() {
            const processBtn = document.getElementById('processBtn');
            const hasPhotos = photos.length > 0;
            const hasWatermark = watermarkImage !== null;
            
            processBtn.disabled = !(hasPhotos && hasWatermark);
            
            if (!hasPhotos) {
                processBtn.title = '请先选择照片';
            } else if (!hasWatermark) {
                processBtn.title = '请先选择水印图片';
            } else {
                processBtn.title = '处理并下载带水印的照片';
            }
        }
        
        // 处理所有图片并打包下载 - 修复：根据边框设置计算水印位置
        async function processImages() {
            if (photos.length === 0 || !watermarkImage) {
                alert('请先选择照片和水印图片');
                return;
            }
            
            const processBtn = document.getElementById('processBtn');
            const progressContainer = document.getElementById('progressContainer');
            const progressFill = document.getElementById('progressFill');
            const progressText = document.getElementById('progressText');
            
            processBtn.disabled = true;
            progressContainer.style.display = 'block';
            progressFill.style.width = '0%';
            progressText.textContent = '准备处理...';
            
            const zip = new JSZip();
            const watermarkedFolder = zip.folder(`${folderName}_加水印`);
            
            let processedCount = 0;
            
            const sortedPhotos = [...photos].sort((a, b) => {
                return a.file.name.localeCompare(b.file.name, 'zh-CN', {numeric: true});
            });
            
            const fileNameCounts = {};
            
            for (let i = 0; i < sortedPhotos.length; i++) {
                const photo = sortedPhotos[i];
                progressText.textContent = `处理中: ${i+1}/${sortedPhotos.length} (${photo.file.name})`;
                
                try {
                    let canvas, ctx;
                    
                    if (settings.border.enabled) {
                        const borderedWidth = photo.width + settings.border.left + settings.border.right;
                        const borderedHeight = photo.height + settings.border.top + settings.border.bottom;
                        
                        canvas = document.createElement('canvas');
                        canvas.width = borderedWidth;
                        canvas.height = borderedHeight;
                        ctx = canvas.getContext('2d');
                        
                        const borderColor = settings.border.color === 'white' ? '#FFFFFF' : '#000000';
                        ctx.fillStyle = borderColor;
                        ctx.fillRect(0, 0, borderedWidth, borderedHeight);
                        
                        ctx.save();
                        
                        // 修复问题2：在最终生成时使用设置的圆角像素值
                        // 每张照片都使用相同的圆角像素值
                        if (settings.border.borderRadius > 0) {
                            ctx.beginPath();
                            ctx.roundRect(
                                settings.border.left, 
                                settings.border.top, 
                                photo.width, 
                                photo.height, 
                                settings.border.borderRadius
                            );
                            ctx.clip();
                        }
                        
                        ctx.drawImage(photo.img, settings.border.left, settings.border.top, photo.width, photo.height);
                        ctx.restore();
                    } else {
                        canvas = document.createElement('canvas');
                        canvas.width = photo.width;
                        canvas.height = photo.height;
                        ctx = canvas.getContext('2d');
                        
                        ctx.drawImage(photo.img, 0, 0, photo.width, photo.height);
                    }
                    
                    const orientation = photo.orientation;
                    const position = orientation === 'horizontal' ? horizontalPosition : verticalPosition;
                    
                    const watermarkSize = orientation === 'horizontal' ? 
                        settings.horizontalWatermarkSize : settings.verticalWatermarkSize;
                    
                    const watermarkWidth = (watermarkSize / 100) * photo.width;
                    const watermarkHeight = (watermarkImage.height / watermarkImage.width) * watermarkWidth;
                    
                    let watermarkX, watermarkY;
                    
                    // 修复：根据边框设置计算水印位置
                    if (settings.border.enabled) {
                        const borderedWidth = photo.width + settings.border.left + settings.border.right;
                        const borderedHeight = photo.height + settings.border.top + settings.border.bottom;
                        
                        watermarkX = (position.x / 100) * borderedWidth - watermarkWidth / 2;
                        watermarkY = (position.y / 100) * borderedHeight - watermarkHeight / 2;
                    } else {
                        watermarkX = (position.x / 100) * photo.width - watermarkWidth / 2;
                        watermarkY = (position.y / 100) * photo.height - watermarkHeight / 2;
                    }
                    
                    // 确保水印不会超出画布边界
                    watermarkX = Math.max(0, Math.min(watermarkX, canvas.width - watermarkWidth));
                    watermarkY = Math.max(0, Math.min(watermarkY, canvas.height - watermarkHeight));
                    
                    // 修复：在最终处理时也要根据照片是否单独调节来选择透明度
                    const photoIndex = photos.indexOf(photo);
                    let opacity;
                    let brightness, contrast, saturation, exposure;
                    
                    if (selectedPhotos.has(photoIndex)) {
                        opacity = photo.watermarkOpacity;
                        brightness = photo.watermarkBrightness;
                        contrast = photo.watermarkContrast;
                        saturation = photo.watermarkSaturation;
                        exposure = photo.watermarkExposure;
                    } else {
                        opacity = orientation === 'horizontal' ? 
                            settings.horizontalWatermarkOpacity : settings.verticalWatermarkOpacity;
                        brightness = 100;
                        contrast = 100;
                        saturation = 100;
                        exposure = 100;
                    }
                    
                    ctx.save();
                    ctx.globalAlpha = opacity;
                    
                    // 修复：正确应用所有滤镜效果
                    let filterString = `brightness(${brightness}%) contrast(${contrast}%) saturate(${saturation}%)`;
                    
                    // 处理曝光度
                    if (exposure !== 100) {
                        const exposureFactor = exposure / 100;
                        const finalBrightness = brightness * exposureFactor;
                        filterString = `brightness(${finalBrightness}%) contrast(${contrast}%) saturate(${saturation}%)`;
                    }
                    
                    ctx.filter = filterString;
                    ctx.drawImage(watermarkImage, watermarkX, watermarkY, watermarkWidth, watermarkHeight);
                    ctx.restore();
                    
                    const blob = await new Promise(resolve => {
                        canvas.toBlob(resolve, 'image/jpeg', 1.0);
                    });
                    
                    const baseName = photo.file.name.replace(/\.[^/.]+$/, "");
                    const extension = "_watermarked.jpg";
                    let fileName = baseName + extension;
                    
                    if (!fileNameCounts[fileName]) {
                        fileNameCounts[fileName] = 1;
                    } else {
                        fileNameCounts[fileName]++;
                        const nameWithoutExt = baseName;
                        const fileExtension = "_watermarked.jpg";
                        fileName = `${nameWithoutExt}_${fileNameCounts[fileName]}${fileExtension}`;
                    }
                    
                    watermarkedFolder.file(fileName, blob);
                    
                    processedCount++;
                    progressFill.style.width = `${(processedCount / sortedPhotos.length) * 100}%`;
                    
                } catch (error) {
                    console.error(`处理图片 ${photo.file.name} 时出错:`, error);
                }
            }
            
            progressText.textContent = '正在打包文件...';
            
            try {
                const zipBlob = await zip.generateAsync({type: "blob"});
                
                const downloadLink = document.createElement('a');
                downloadLink.href = URL.createObjectURL(zipBlob);
                downloadLink.download = `${folderName}_加水印_${new Date().toISOString().slice(0, 10)}.zip`;
                document.body.appendChild(downloadLink);
                downloadLink.click();
                document.body.removeChild(downloadLink);
                
                progressText.textContent = `完成！已处理 ${processedCount} 张照片`;
                progressFill.style.width = '100%';
                
                setTimeout(() => {
                    processBtn.disabled = false;
                    progressContainer.style.display = 'none';
                }, 3000);
                
            } catch (error) {
                console.error('生成ZIP文件时出错:', error);
                progressText.textContent = '打包失败，请重试';
                processBtn.disabled = false;
            }
        }
        
        // 辅助函数：格式化文件大小
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
        
        // 添加 roundRect 方法到 CanvasRenderingContext2D 原型
        if (!CanvasRenderingContext2D.prototype.roundRect) {
            CanvasRenderingContext2D.prototype.roundRect = function(x, y, width, height, radius) {
                if (width < 2 * radius) radius = width / 2;
                if (height < 2 * radius) radius = height / 2;
                
                this.beginPath();
                this.moveTo(x + radius, y);
                this.arcTo(x + width, y, x + width, y + height, radius);
                this.arcTo(x + width, y + height, x, y + height, radius);
                this.arcTo(x, y + height, x, y, radius);
                this.arcTo(x, y, x + width, y, radius);
                this.closePath();
                return this;
            };
        }
    </script>
</body>
</html>